为什么在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