css – Flexbox在IE中不垂直居中

我有一个简单的网页，有一些以页面为中心的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。

希望这有助于某人。

css – Flexbox在IE中不垂直居中

解决方法

猜你在找的CSS相关文章