Flexbox不在IE中垂直居中

Question

我有一个简单的网页,其中包含一些以页面为中心的Lipsum内容.该页面在Chrome和Firefox中运行良好.如果我缩小窗口的大小,内容将填充窗口,直到它不能,然后添加滚动条并将内容从屏幕填充到底部.

但是,该页面不在IE11中.我可以通过弯曲身体让页面在IE中居中,但是如果我这样做,那么内容开始从屏幕上移到顶部并切断内容的顶部.

以下是两种情况.查看相关的小提琴.如果问题不明显,请减小结果窗口的大小,以便强制生成滚动条.

注意:此应用程序仅针对最新版本的Firefox,Chrome和IE(IE11),它们都支持Flexbox的候选推荐标准,因此功能兼容性不应成为问题(理论上).

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

编辑:IE11使用非供应商特定的Flexbox实现.灵活的框("Flexbox")布局更新

---

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

Answer 1

我发现浏览器在垂直对齐内部容器时有问题,只设置了最小高度样式或者根本没有高度样式.我所做的是添加具有一定价值的高度风格,并为我解决问题.

例如 :

.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;
    }

所以现在我们有高度风格,但是最小高度会覆盖它.那种方式即很高兴,我们仍然可以使用最小高度.

希望这对某人有帮助.

Answer 2

尝试在flexboxed flex-direction: column的容器中包装你有的flexboxed div .

我刚刚在IE11中对此进行了测试,它确实有效.一个奇怪的修复,但直到微软将其内部错误修复为外部......它必须要做!

HTML:

<div class="FlexContainerWrapper">
    <div class="FlexContainer">
        <div class="FlexItem">
            <p>I should be centered.</p>
        </div>
    </div>
</div>

CSS:

html, body {
  height: 100%;
}

.FlexContainerWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.FlexContainer {
  align-items: center;
  background: hsla(0,0%,0%,.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  width: 600px;
}

.FlexItem {
  background: hsla(0,0%,0%,.1);
  box-sizing: border-box;
  max-width: 100%;
}

您在IE11中测试的2个示例:http : //codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/

Answer 3

来自https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042的原始答案

.flex-container{
min-height:100px;
display:flex;
align-items:center;
}

.flex-container:after{
content:'';
min-height:inherit;
font-size:0;
}

Answer 4

以防有人带着我遇到的同样问题来到这里,这在以前的评论中没有具体说明.

我margin: auto在内部元素上使它粘在它的父母(或外部元素)的底部.为我修好的是将保证金更改为margin: 0 auto;.

Answer 5

这是我的工作解决方案（SCSS）：

.item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 120px;
  &:after{
    content:'';
    min-height:inherit;
    font-size:0;
  }
}

Answer 6

这是一个已知的错误,似乎已在Microsoft内部修复.

https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview

Answer 7

我已经更新了两个小提琴。我希望它能让你完成工作。

定心

    html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
}

.outer
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
    margin: 0 auto;
}

居中并滚动

html, body
    {
        height: 100%;
        width: 100%;
    }

    body
    {
        margin: 0;
        display:flex;
    }

    .outer
    {
        min-width: 100%;  
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .inner
    {
        width: 80%;
    margin-top:40px;
    margin: 0 auto;
    }