垂直居中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放置display：table 并设置属性vallign =“middle”

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