html - Vertically center div with Bootstrap and IE fix -
currently, using html , css works great in chrome, firefox , safari.
however, doesn't work in ie9 , ie10 ( not trying support ie8 or previous versions).
in internet explorer 10 looks this. centered horizontally , not centered vertically.
.login-page-container { min-height: 293px; min-height: 29.3rem; min-width: 328px; min-width: 32.8rem; background-color: red; } .vertical-center { min-height: 100%; min-height: 100vh; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .relative-position { position: relative; }
<div class="vertical-center relative-position"> <div class="login-page-container"> <div class="page-header"> <div class="login-header center-block"> </div> </div> <div class="row"> <div class="col-md-12"> <form action="/account/login" class="" method="post" role="form"> <div class="login-form-container"> <!-- elements --> <h1>element </h1> </div> </form> </div> </div> </div> </div>
so appreciated. thank advance.
for ie9 , ie10 put display:table , set attribute vallign="middle"
vallign basic property supperted old browsers new browsers
Comments
Post a Comment