Html 如何在文本居中时继承父div？

我有一个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-text{
position: relative;
top: 50%;
transform: translateY(-50%);
}

---

它基本上占据了整个网页的50%。我希望它沿div向下50%（垂直居中）

查看flexbox。您可以使用以下方法将文本居中：

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

更详细的信息：

---

如果该文本应该出现在父对象的上方/内部，则需要

位置：绝对值


使命宣言{
页边顶部：自动；
页边距底部：自动；
高度：100vh；
宽度：100vw；
}
#任务说明h1{
颜色：白色；
文本阴影：-3px 0黑色，0 3px黑色，3px 0黑色，0-3px黑色；
}
#任务说明文本{
位置：绝对位置；
宽度：100%；
文本对齐：居中；
最高：50%；
转化：translateY（-50%）；
}

基于地图的企业运营管理

hmm这似乎出于某种原因将文本移到了div的一侧。你能粘贴一个屏幕截图吗？我真的无法想象你到底想要达到什么……太棒了。出于某种原因，当我尝试通过添加transform使文本水平居中时：translateX（-50%）；它认为这是不适用的。“绝对”位置是否会妨碍其他类似操作？只需添加

width:100%

和

text align:center

。（我在编辑的版本中这样做了）。当有宽度和/或高度设置时，绝对位置工作更可靠

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