Question

我使用bootstrap创建了一个模板，我使用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>

flexbox不在移动设备上垂直居中

1 个答案: