按位置垂直居中：絕對僅適用於鍍鉻

Question

我嘗試在部分的中間設置div並將其設置為屏幕高度的100％。 問題是我使用的解決方案無法在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聲明了斷面高度。

演示（在多個瀏覽器中查看）： http : //wbm-blog.esy.es/projects/timeline/

Answer 1

我通過設置高度，移除顯示表並設置邊距：自動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>