垂直居中div与Bootstrap和IE修复

Question

目前，我正在使用这个html和CSS，它在Chrome，Firefox和Safari中运行良好。

但是，它甚至不能在IE9和IE10中工作 （我们不是试图支持IE8或任何以前的版本）。

在Internet Explorer 10中它看起来像这样。 水平居中，但不是垂直居中。

 .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> 

所以任何帮助将不胜感激。 谢谢你提前。

Answer 1

对于IE9和IE10放置显示：表和设置属性vallign =“中”

vallign是旧浏览器以及一些新浏览器所支持的基本属性