ie css居中,css – Flexbox在IE中不垂直居中

我有一个简单的网页，有一些以页面为中心的Lipsum内容。该网页在Chrome和Firefox中正常工作。如果我减小窗口的大小，内容填充窗口，直到它不能，然后添加一个滚动条，并填充内容关闭屏幕，底部。

但是，该页面不在IE11中心。我可以通过弯曲身体得到页面中心在IE，但如果我这样做，然后内容开始向屏幕顶部，并切断内容的顶部。

下面是两种情况。查看相关的Fiddles。如果问题不明显，请缩小结果窗口的大小，以便强制生成滚动条。

注意：此应用程序仅定位到最新版本的Firefox，Chrome和IE(IE11)，这些都支持Candidate Recommendation of Flexbox，因此功能兼容性不应该是一个问题(理论上)。

编辑：使用全屏API全屏显示外部div时，所有浏览器都使用原始CSS正确居中。但是，在离开全屏模式时，IE将恢复为水平居中和垂直顶部对齐。

在Chrome / FF中正确调整中心和大小，在IE11中不正确调整大小，但调整大小

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%;

}

中心在任何地方，当尺寸下降时，切割顶部

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%;

}