當容器在 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/