我用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属性。然后内部的元素将遵循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>
关于html - Flexbox无法在移动设备上垂直居中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32470377/