Vertical center div with Bootstrap and IE fix

Question

I am currently using this html and CSS, which works fine in Chrome, Firefox and Safari.

However, it does not work even in IE9 and IE10 (we are not trying to support IE8 or any previous versions).

In Internet explorer 10, it looks like this. It is centered horizontally, but it is 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>

Run codeHide result

Therefore any help would be appreciated. Thanks in advance.

Answer 1

to display IE9 and IE10: table and set the attribute vallign = "medium"

vallign is the main feature used by older browsers, as well as some newer browsers