Question

这是CSS Secrets: Better Solutions to Everyday Web Design Problems本书中的链接，该链接将仅使用css3来居中任何内容，而不指定宽度。链接：http://dabblet.com/gist/8aa9aa04ee57f479c513。 IE 11支持flex模型，vh unit＆amp;盒大小。为什么垂直对中部分不能在IE11中工作？它适用于Chrome，Firefox和边缘。

我也试图在IE10中使用polyfill工作，但我没有成功。如果有人管理这个在这些较低版本的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>

为什么这个用于垂直居中的css3在IE11中不起作用？适用于Firefox，Chrome和边缘

1 个答案: