如何在将文本居中时继承父 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>

Answer 2

看看flexbox。您可以使用类似以下内容使文本居中

.align-center {
      display: flex;
      align-items: center;
      justify-content: center;
    }

更详细：https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/