html - Vertically center div with Bootstrap and IE fix -


currently, using html , css works great in chrome, firefox , safari.

login html rendering view

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. enter image description here

.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

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -