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

來源

2017-09-26 user1708687

請檢查和評論我的答案，並讓我知道如果有什麼不清楚或缺失。如果不是，那麼如果你能接受最能幫助你的答案，那將是非常好的。 – 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>

來源

2017-09-26 08:44:23 LGSon

我認爲你被錯誤使用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/

來源

2017-09-26 10:09:06 jobmo

當容器在iE11中具有固定高度時，Flexbox項目不會按預期垂直對齊

回答

相關問題