html - 居中文本时如何继承父div？

Question

我有一个 div 使命声明，它应该是整个可见浏览器的宽度和高度

<div id="mission-statement">
    <video playsinline autoplay muted loop poster="{{ url_for('static',filename='images/cclc-background-image.png') }}" id="bgvid">
        <source src="{{ url_for('static',filename='videos/cclc-background-video.mov') }}" type="video/webm">
    </video>
    <div id="mission-statement-text">
    <h1>Map-Based Operations Management for Enterprise</h1>
    </div>
</div>

#mission-statement{
    margin-top:auto;
    margin-bottom:auto;
    height: 100vh;
    width:100vw;
}

这部分确实显示为带有黑色边框的白色

#mission-statement h1{
    color: white;
    text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;

}

这是似乎不起作用的部分

#mission-statement-text{
position: relative;
top: 50%;
transform: translateY(-50%);
}

它基本上占整个网页的 50%。我希望它位于 div 下方的 50%(垂直居中)

Answer 1

如果该文本应该出现在父级上方/内部，则需要 position: absolute。

#mission-statement {
  margin-top: auto;
  margin-bottom: auto;
  height: 100vh;
  width: 100vw;
}

#mission-statement h1 {
  color: white;
  text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;
}

#mission-statement-text {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

<div id="mission-statement">
  <video playsinline autoplay muted loop poster="{{ url_for('static',filename='images/cclc-background-image.png') }}" id="bgvid">
        <source src="{{ url_for('static',filename='videos/cclc-background-video.mov') }}" type="video/webm">
    </video>
  <div id="mission-statement-text">
    <h1>Map-Based Operations Management for Enterprise</h1>
  </div>
</div>