javascript - 按位置 :absolute works only on chrome 垂直居中

Question

我尝试在高度设置为屏幕高度的 100% 的部分中间设置具有少量元素的 div。问题是我使用的解决方案不适用于 Google Chrome 以外的其他浏览器。我使用了 position:absolute, display:table, margins 和 top:0, bottom:0;

var section = document.querySelectorAll('section');
  var winh = window.innerHeight;
  header.style.height = winh+'px';
  for (var i = 0; i <= 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>

在 chrome 上看起来很完美，但在其他浏览器上却不是。我已通过 JavaScript 声明的部分高度。

DEMO(在多个浏览器中查看): http://wbm-blog.esy.es/projects/timeline/

Answer 1

我通过设置高度、删除显示表和设置边距来修复它:auto 0。使用技巧居中时需要高度 top: 0;底部:0；边距顶部:自动；底部边距:自动；

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>