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

【问题标题】：Flexbox item does not vertically align as expected when container has a fixed height in iE11当容器在 iE11 中具有固定高度时，Flexbox 项目未按预期垂直对齐
【发布时间】：2018-03-07 09:21:47
【问题描述】：

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

【问题讨论】：

请查看并评论我的回答，如果有不清楚或遗漏的地方，请告诉我。如果没有，那么如果您能接受对您帮助最大的答案，那就太好了。

标签： css internet-explorer flexbox

【解决方案1】：

IE11 在 Flexbox 方面存在缺陷，在这种情况下，它与其他浏览器不同。

在弹性列方向时，使用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>

【讨论】：

【解决方案2】：

我认为您错误地使用了justify-content: center 和flex-direction: column；

在一个flex列中，X轴对齐由align-items控制，Y轴对齐由@987654325控制@

如果您删除 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/

【讨论】：