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

Question

我在 IE11 中遇到 flexbox 垂直对齐问题。

我有一个 flexbox 容器和一个 child 。我在元素 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>