在div内水平和垂直居中段落答案

【问题标题】：center horizontally and vertically paragraph inside div在div内水平和垂直居中段落
【发布时间】：2020-01-19 14:08:16
【问题描述】：

如何让 div 中的段落水平和垂直居中，我得出了这个结果

.Benefits {
  min-height: 20%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

<section class="Benefits">
  <div>
    <h1>Lorem ipsum </h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
  </div>
  <div>
    <h1>Lorem ipsum n</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
  </div>
  <div>
    <h1>Lorem ipsum </h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
  </div>

</section>

【问题讨论】：

对齐项目：居中；
您要居中哪一段？你有 4 个。或者您想将所有内容居中，例如 .Benefits 正下方的整个 div？
请提供更多关于您想要实现的目标的信息
我想让每个div的Paragraph垂直和水平居中

标签： css flexbox css-grid

【解决方案1】：

.Benefits div {
  min-height: 20%;
  margin: auto;
  width: 50%;
}

<section class="Benefits">
  <div>
    <h1>Lorem ipsum </h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
  </div>
  <div>
    <h1>Lorem ipsum n</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
  </div>
  <div>
    <h1>Lorem ipsum </h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
  </div>

</section>

【讨论】：

【解决方案2】：

我已经在我的 CSS 中记录了这里发生了什么：

我认为您最好使用display: flex 的两个案例。一个水平的，一个垂直的。

.Benefits {
    width: 100%;
    max-width: 1248px;
    margin: 0 auto; /* centers container */
    padding: 10px; /* this combined with the margin in the divs will make the margins appear consistent */
    box-sizing: border-box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-direction: row; /* sort into rows */
    align-items: center;
    justify-content: space-between;
    text-align: center;
}

    .Benefits div {
        width: calc((100% / 3) - 20px); /* calculate width for maximum accuracy | minus margin */
        margin: 10px; /* space between boxes */
        padding: 20px; /* space inside boxes */
        box-sizing: border-box; /* calculates border and padding in width */
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        flex-direction: column; /* sort into columns */
        align-items: center;
        justify-content: center;
        flex-grow: 1; /* forces singular div that falls beneath to be full width */

        background-color: rgba(0,0,0,0.25);
    }
        @media screen and (min-width: 640px) and (max-width: 1023px) {
            .Benefits div {
                width: calc((100% / 2) - 20px); /* calculate width for maximum accuracy | minus margin */
            }
        }
        @media screen and (max-width: 639px) {
            .Benefits div {
                width: 100%; /* calculate width for maximum accuracy | minus margin */
            }
        }

        .Benefits div h1 {
            margin-bottom: 20px;
        }

<section class="Benefits">

    <div>
        <h1>Lorem ipsum </h1>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
    </div>
    <div>
        <h1>Lorem ipsum n</h1>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
    </div>
    <div>
        <h1>Lorem ipsum </h1>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
    </div>

</section>

【讨论】：

是的，任何人都可以对任何答案进行投票。我猜他们在你使用前缀 display: *-flex 时对你的投了反对票，但在其他 flex 属性上没有，如果不是，那么首先添加前缀完全没有意义