带有Flexbox的垂直中心和子项的对齐方式[重复]

Question

现在才开始尝试使用 flexbox，我正在使用它来垂直居中 div 内的内容。

    .parent{
       display: flex;
       align-items: center;
       justify-content: center;
    }

    <div class="parent">
       <h1>Title</h1>
       <p>Paragraph one.</p>
       <p>Paragraph two.</p>
    </div>

因此，当我这样做时，它可以工作，但子元素彼此并排放置，就像它们不再是块项目一样。我怎样才能让它们垂直居中但彼此堆叠？

干杯！

Answer 1

如果要在列中显示元素，则需要使用flex-direction: column 样式属性。

.parent{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

<div class="parent">
   <h1>Title</h1>
   <p>Paragraph one.</p>
   <p>Paragraph two.</p>
</div>