【发布时间】：2013-10-22 16:35:00
【问题描述】：
我有一个简单的网页，其中包含一些以页面为中心的 Lipsum 内容。该页面在 Chrome 和 Firefox 中运行良好。如果我减小窗口的大小，内容会填充窗口直到它不能，然后添加一个滚动条并将内容填充到屏幕外，朝向底部。
但是，页面不在 IE11 中居中。我可以通过弯曲正文使页面在 IE 中居中，但如果我这样做了，那么内容就会开始向顶部移出屏幕并切断内容的顶部。
以下是两种情况。请参阅相关的小提琴。如果问题没有立即显现，请减小结果窗口的大小，使其强制生成滚动条。
注意：此应用程序仅针对最新版本的 Firefox、Chrome 和 IE (IE11)，它们都支持 Candidate Recommendation of Flexbox，因此功能兼容性应该不是问题（理论上）。
编辑：当使用 Fullscreen API 全屏显示外部 div 时，所有浏览器都使用原始 CSS 正确居中。但是，在离开全屏模式后，IE 会恢复为水平居中和垂直顶部对齐。
编辑：IE11 使用非供应商特定的 Flexbox 实现。 Flexible box ("Flexbox") layout updates
在 Chrome/FF 中正确居中和调整大小，在 IE11 中不居中但正确调整大小
小提琴：http://jsfiddle.net/Dragonseer/3D6vw/
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
}
.outer
{
min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
}
在任何地方都正确居中，缩小时从顶部切掉
小提琴：http://jsfiddle.net/Dragonseer/5CxAy/
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
display: flex;
}
.outer
{
min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
}
【问题讨论】：
-
我目前无法访问IE11，您是否尝试过这个解决方案：stackoverflow.com/questions/16122341/…？
-
margin:auto 似乎没有什么不同。
-
请向微软报告错误，至少他们在正式发布时会少一个错误，因为 IE 总是会有一些东西（许多独特的错误）需要处理..
-
IE 需要使用
-ms-flexbox.. -
IE11 使用当前的 Flexbox 标准 display:flex。 msdn.microsoft.com/en-us/library/ie/dn265027(v=vs.85).aspx。无论如何我都试过了，但并没有什么不同；内容仍然是顶部对齐的。另外，请注意我在原始问题中的编辑，其中指出外部 div 在全屏时正确居中，但在全屏时顶部对齐。
标签： internet-explorer css flexbox internet-explorer-11