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/

如何在文本居中的情况下继承父div？

2 个答案: