javascript - vertical centering by position:absolute works only on chrome -


i try set div few elements in middle of section height set 100% of screen height. problem solution have used doesn't work on other browsers google chrome. used position:absolute, display:table, margins , top:0, bottom:0;

var section = document.queryselectorall('section');    var winh = window.innerheight;    header.style.height = winh+'px';    (var = 0; <= section.length; i++) {      section[i].style.height = winh+'px';    }
section {      padding:100px 0;      position:relative;      background:#222;  }                                               section div {      width:90%;      max-width:1200px;      margin:0 auto;      text-align:center;      position:absolute;      left:0;right:0;top:0;bottom:0;      display:table;   }
<section class="users">      <div>          <div class="icon"><i class="fa fa-user" aria-hidden="true"></i></div>          <div class="count">15 000</div>          <div class="title">użytkowników</div>      </div>  </section>

on chrome looks perfect, on other browsers-not. section height have declared javascript.

demo (view in more 1 browser): http://wbm-blog.esy.es/projects/timeline/

i fixed setting height, removing display table , setting margin: auto 0. height needed when centering trick top: 0; bottom: 0; margin-top: auto; margin-bottom: auto;

section {      padding:100px 0;      position:relative;  }                                               section > div {      width:90%;      max-width:1200px;      margin: auto 0;      height: 40px;      text-align:center;      position:absolute;      left:0;right:0;top:0;bottom:0;  }
<section class="users">      <div>          <div class="icon"><i class="fa fa-user" aria-hidden="true"></i></div>          <div class="count">15 000</div>          <div class="title">użytkowników</div>      </div>  </section>


Comments

Popular posts from this blog

php - Permission denied. Laravel linux server -

google bigquery - Delta between query execution time and Java query call to finish -

python - Pandas two dataframes multiplication? -