Flexbox無法在移動設備上垂直居中

Question

我已經使用引導程序制作了一個模板，並且正在使用flexbox將着陸頁內容垂直和水平居中。 它在台式機上看起來不錯（檢查了chrome和Firefox），但在移動設備上（檢查了chrome和safari）它浮動到頂部。 我已經在網上搜索過，但是沒有找到適合我的解決方案。

我已經粘貼了代碼，實時版本位於http://webcanvases.com/download-theme/theme/material-theme.html

的HTML

<!-- Landing Page -->
<div class="video-bg vertical-center" id="page-top" data-vide-bg="mp4/traffic2">  
    <div class="jumbotron container text-center">
        <h1>Material World<br>Theme</h1> 
        <a data-scroll href="#about"><span class="glyphicon glyphicon-menu-down animated bounce"></span></a>
    </div>
</div>
<!-- Landing Page End -->

的CSS

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

.video-bg {
    height: 800px;
    min-width: 100%;
}

Answer 1

它不起作用，因為您必須在外部容器上設置flex屬性。 然后，內部的元素將遵循flex屬性。

 .vertical-center { display: flex; align-items: center; justify-content: center; height: 100vh; background: #ccc; } .video-bg { width: 400px; height: 300px; background: yellow; } 

 <div class="vertical-center"> <div class="video-bg"></div> </div>