flexboxモデルを使用してdivを水平にセンターする方法

Question

私はブートストラップを使用しており、IEのセンタリングボックスに問題があります。 Chromeは期待どおりに動作します。ここで

は私のマークアップです：

<div class="modal modal-flex" tabindex="-1"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     IE, why I have so much problems with you? 
    </div> 
    </div> 
</div> 

私modal-flexクラスは、（私は例を単純化するために、ベンダー固有のスタイルを削除した）単純です：IEで

.modal-flex { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

私のボックスがで、右に移動されますクロムは成功裏に集中しました。

IE：

クローム

は、ここに私のバイオリンhttps://jsfiddle.net/vadimb/mj6ygckq/3/

Answer 1

IEの中央を揃えるためにflex-flow:column nowrap;を追加してくださいです。

Answer 2

.modal-flex { 
 
    display: -webkit-flex; 
 
    display: -moz-flex; 
 
    display: -ms-flexbox; 
 
    display: -o-flex; 
 
    display: flex; 
 
    flex-flow:column nowrap; /*Add this */ 
 
    justify-content: center; 
 
    -ms-justify-content: center; 
 
    -ms-flex-pack: center; 
 
    align-items: center; 
 
}

<div class="modal modal-flex" tabindex="-1" *ngIf="showAdding"> 
 
    <div class="modal-dialog" role="document"> 
 
<div class="modal-content"> 
 
    IE, why I have so much problems with you? 
 
</div> 
 
<!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
</div> 
 
<!-- /.modal -->

は、私はまた、簡単な解決策を見つけた - justify-content: center;スタイルルールを除外する。 1は フレームワークを使用するときは、この場合には、追加するとき、彼らは時々、常に正常に動作しないような方法で特性を組み合わせる https://jsfiddle.net/mj6ygckq/8/

Answer 3

：そして、位置決めフィドル更新されます。ここ

同様

.modal-flex { 
    display: flex; 
    align-items: center; 
} 

作業開始しました新しい標準、特にFlexboxを使用すると、予測できない結果を招く可能性があります。

この場合、メディアクエリは、modal-dialogに自動マージンを設定します。

は、Flex行方向を使用したいと仮定すると、水平および垂直方向の両方のダイアログを合わせ、このCSSルールを追加

@media (min-width: 768px) { 
    .modal-dialog { 
    margin: 0; 
    } 
} 

Updated fiddle