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

Question

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

Answer 1

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>

Answer 2

我认为您错误地使用了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/