垂直居中：父元素带有2个子元素

Question

请查看以下代码：

<div class="parent">
  <header class="child-1">
    <h1 class="float-left">lorem...</h1>
    <div class="float-right">lorem...</div>
  </header>
  <div class="child-2">lorem...</div>
</div>

CSS如下：

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

应用此选项将导致child-1和child-2垂直居中对齐在一行中。我需要child-2应该从第2行开始，即恰好在child-1下方。

预先感谢

Answer 1

设置flex-direction：

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

<div class="parent">
  <header class="child-1">
    <h1 class="float-left">lorem...</h1>
    <div class="float-right">lorem...</div>
  </header>
  <div class="child-2">lorem...</div>
</div>

那么您可能想要调整align-items，因为我假设您实际上并不希望将所有内容水平居中。

Answer 2

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