爲什麼在IE11中這個垂直居中的css3不能工作？適用於Firefox，Chrome和Edge

Question

這是一本CSS Secrets: Better Solutions to Everyday Web Design Problems本書的鏈接，它將使用css3將任何內容居中並且不指定寬度。鏈接：http://dabblet.com/gist/8aa9aa04ee57f479c513。 IE 11支持flex模型，vh單元& box-sizing。爲什麼垂直居中部分不能在IE11中工作？它適用於Chrome，Firefox & Edge。

我也試圖讓它在IE10中工作 - 使用polyfills，我沒有成功。如果任何人管理這個工作在這些低版本的IE瀏覽器，請張貼您的解決方案。

Answer 1

對於您的示例，IE11希望HTML，BODY和MAIN具有定義的高度。人們可以辯論哪個瀏覽器是正確的，哪個瀏覽器具有隱藏功能。我更喜歡FF開發者版編碼和測試，因爲它似乎與W3C接近。

檢查片段爲附加的...

/** 
 
* Vertical centering - Flexbox solution 
 
*/ 
 

 
html, body { height: 100% } /* ADDED */ 
 

 
* { 
 
    margin: 0 
 
} 
 
body { 
 
    display: flex; 
 
    min-height: 100vh; 
 
} 
 
main { 
 
    height: 100px; /* ADDED */ 
 
    padding: 1em 2em; 
 
    margin: auto; 
 
    box-sizing: border-box; 
 
    background: #655; 
 
    color: white; 
 
    text-align: center; 
 
} 
 
h1 { 
 
    margin-bottom: .2em; 
 
    font-size: 150%; 
 
} 
 
body { 
 
    background: #fb3; 
 
    font: 100%/1.5 sans-serif; 
 
}

<main> 
 
    <h1>Am I centered yet?</h1> 
 
    <p>Center me, please!</p> 
 
</main> \t