位置による垂直方向のセンタリング：絶対クロムのみで動作します

Question

画面の高さの100％に設定されたセクションの中央に、いくつかの要素でdivを設定しようとしています。問題は、私が使用したソリューションがGoogle Chrome以外のブラウザでは動作しないことです。私は位置を使用しました：絶対、表示：テーブル、余白と上：0、下：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

Iは、高さを設定する表示テーブルを除去し、マージンを設定することによってそれを修正：自動0 トリックトップとセンタリングとき高さが必要とされます。 0;下：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>