当容器在iE11中具有固定高度时，Flexbox项目不会按预期垂直对齐

问题描述：

我在IE11中有flexbox垂直对齐问题。当容器在iE11中具有固定高度时，Flexbox项目不会按预期垂直对齐

我有一个flexbox容器一个孩子。在div项中有一个图像。图像比flex容器大，因此我想使用justify-content：center显示图像的中间部分。这在我所期望的所有浏览器中都能正常工作，但IE11。附图应显示问题。任何帮助表示赞赏。

<div class="container"> 
    <div class="item"> 
    <img src="image.jpg" /> 
    </div> 
</div> 

.container { 
    display: flex; 
    flex-direction: column; 
    height: 200px; 
    overflow: hidden; 
}

请检查和评论我的答案，并让我知道如果有什么不清楚或缺失。如果不是，那么如果你能接受最能帮助你的答案，那将是非常好的。 – LGSon

答

IE11是越野车，当谈到Flexbox的，在这种情况下它其他浏览器没有的东西。

在flex列方向上，使用transform: translate()使其行为。

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    border: 1px dashed gray; 
 
} 
 

 
/* IE11 only */ 
 
_:-ms-fullscreen, :root .IE11Fix { 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<div class="container"> 
 
    <div class="item IE11Fix"> 
 
    <img src="http://placehold.it/100x300/f00" /> 
 
    </div> 
 
</div>

答

我认为你被错误使用justify-content: center和flex-direction: column;

在Flex 列，该X轴对准由align-items控制和Y轴对准由justify-content

控制。如果你删除flex-direction: column和设置您的容器是align-items: center和justify-content: center，两者的工作方式与预期结果相同：

.container { 
    display: flex; 
    height: 200px; 
    justify-content: center; 
    align-items: center; 
}

https://jsfiddle.net/s3Lmqndu/1/

当容器在iE11中具有固定高度时，Flexbox项目不会按预期垂直对齐

相关推荐