I have made a template using bootstrap and I am using a flexbox to vertically and horizontally center my landing page content. It looks fine on a desktop(chrome and firefox checked), but on mobile(chrome and safari checked) it floats to the top. I have searched the web but have not found a solution that has worked for me.
I have pasted in my code and the live version is at 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%;
}
It's not working because you have to set the flex properties on an outer container. Then the elements on the inside will follow the flex properties.
.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.