我有一个简单的网页，有一些以页面为中心的Lipsum内容。该网页在Chrome和Firefox中正常工作。如果我减小窗口的大小，内容填充窗口，直到它不能，然后添加一个滚动条，并填充内容关闭屏幕，底部。
但是，该页面不在IE11中心。我可以通过弯曲身体得到页面中心在IE，但如果我这样做，然后内容开始向屏幕顶部，并切断内容的顶部。
下面是两种情况。查看相关的Fiddles。如果问题不明显，请缩小结果窗口的大小，以便强制生成滚动条。
注意：此应用程序仅定位到最新版本的Firefox，Chrome和IE(IE11)，这些都支持Candidate Recommendation of Flexbox，因此功能兼容性不应该是一个问题(理论上)。
编辑：使用全屏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%;
}
解决方法
我发现ie浏览器有问题垂直对齐内部容器，当只设置最小高度样式或高度样式丢失。我做的是添加高度样式与一些价值，并解决我的问题。
例如 ：
.outer
{
display: -ms-flexBox;
display: -webkit-flex;
display: flex;
/* Center vertically */
align-items: center;
/*Center horizontaly */
justify-content: center;
/*Center horizontaly ie */
-ms-flex-pack: center;
min-height: 220px;
height:100px;
min-height: 220px;
height:120px;
}
所以现在我们有高度风格，但最小高度将覆盖它。那种方式即是快乐，我们仍然可以使用min-height。
希望这有助于某人。
