コンテナがiE11で高さが固定されている場合、Flexboxアイテムが予想どおりに垂直に整列しない

Question

私はIE11でフレックスボックス垂直整列の問題があります。

私は子供のフレックスボックスを持っています。 item 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はバグがあり、この場合には、それは他のブラウザが何をするかしません。

フレックス列方向の場合は、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を使用していると思います。フレックス列、X軸合わせで

はalign-itemsによって制御され、あなたがflex-direction: columnとセットあなたのコンテナを削除場合Y軸調整はjustify-content

によって制御され、 align-items: centerとjustify-content: centerである場合、両方とも同じ方法で期待通りの結果が得られます。

https://jsfiddle.net/s3Lmqndu/1/