如何在居中文本內部時繼承父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％。我希望它的下降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/