html - 在具有多个 div 的父 div 中居中特定子 div

Question

我有一个有两个子 div 的父 div。父 div 占据视口高度。第一个孩子（标题）必须在顶部，而第二个孩子（文本包装）必须垂直居中。无论屏幕大小如何，如何确保文本包装器垂直居中？

一种可能的解决方案是将标题设置为绝对，并设置顶部：0px。然后通过设置 align-items: center 可以轻松地使文本包装器居中。但是因为我最近了解了视口单位，所以我想知道是否可以使用 vh/vw 等。我只是不明白如果文本包装器的高度是流动的，我将如何使用 vh 居中文本包装器.

链接到小提琴：http: //jsfiddle.net/s1fhae65/3/

我的父 div 的结构：

<section id="zero">
  <div id="header">
    Header
  </div>
  <div id="text-wrapper">
    <h2>
      Title
    </h2>
    <h4>
      Subtitle
    </h4>
  </div>
</section>

标签： htmlcssviewport-units

Answer 1

您可以将 position:absolute 和margin-top: 50vh赋予 text-wrapper div。这样，它将保持在其父 div 的中心。您还可以使用 width:100vw 为文本包装器 div 提供全宽。