在具有多个 div 的 parent div 中中心特定 child div

Question

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

一个可能的解决方案是将 header 设置为绝对值，并设置 top: 0px。然后通过设置 align-items: center 可以很容易地使文本包装器居中。但是自从我最近了解视口单位以来，我想知道是否可以使用 vh/vw 等。我只是不明白如何使用 vh 将文本包装器居中，如果文本包装器的高度是流动的。

link 到 fiddle: http://jsfiddle.net/s1fhae65/3/

我的结构 parent div:

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

Answer 1

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

在具有多个 div 的 parent div 中中心特定 child div

center specific child div in a parent div that has multiple divs

html

css

viewport-units