Css 垂直居中：具有2个子元素的父元素

请查看此代码：

<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>

应用此选项将导致child-1和child-2在一条直线上垂直居中。我需要child-2从第2行开始，即child-1的正下方

---

提前感谢

设置伸缩方向：

.parent{
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
身高：100%；
}

洛勒姆。。。
洛勒姆。。。
洛勒姆。。。

设置flex direction:column会有所帮助，但问题是child-2是动态的，有时它会出现在标记中，有时则不会。如果它出现，则样式将按预期工作，但如果不出现，则child-1将不再垂直居中编辑。您需要设置

justify content

来调整弹性柱的垂直对齐。谢谢，它解决了这个问题。谢谢。但是如果没有身高：如果你在回答中添加一些评论来帮助其他人理解，100%就太好了。这个网站的主要目的之一就是互相学习。谢谢你的建议，我的英语很差。我正在努力提高我的英语水平。

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

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