带有Flexbox的Vertical Center和子项的对齐方式

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>