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

【问题标题】：flexbox not centering vertically on mobileflexbox不在移动设备上垂直居中
【发布时间】：2015-09-09 12:50:03
【问题描述】：

我使用 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%;
}

【问题讨论】：

在您的手机中使用浏览器版本编辑帖子。
可能是浏览器不支持flex的原因
.video-bgheight 设置为静态值 (800px)。尝试使用height : 100vh
Blaze-我尝试切换到 100vh 但仍然遇到同样的问题。
Shehary- Chrome 支持 flexbox，但我尝试在我的 flexbox 属性前面加上 -webkit- 只是想看看它是否有帮助，但它没有。

标签： html css twitter-bootstrap

【解决方案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>

【讨论】：

Jared，感谢您的快速回复。我尝试了代码 sn-p，但它仍然没有在移动设备上垂直居中。它像我当前使用的代码一样浮动到顶部。