ブートストラップV4モーダルをCSSで縦方向に集中管理するにはどうすればよいですか？

Question

Bootstrap V4 modalをCSSで一元管理するにはどうすればよいですか？

Answer 1

あなたはこのような.modal-dialogの位置をオーバーライドし、モーダル..ブートストラップ4ベータ3のよう

.modal.show .modal-dialog { 
    -webkit-transform: translate(0,-50%); 
    -o-transform: translate(0,-50%); 
    transform: translate(0,-50%); 
    top: 50%; 
    margin: 0 auto; 
} 

http://www.codeply.com/go/14Ki1kyTgo

アップデート2018

は、垂直方向の中心が存在することができます上記のカスタムメソッドの代わりに使用できる新しいmodal-dialog-centeredクラス

https://www.codeply.com/go/lpOtIFoN6E（ベータ3）その本当に簡単垂直整列ブートストラップ4モーダルポップアップを追加するフレキシボックスを使用し

Answer 2

。ここにCSSコードがあります。

See Woking Demo

SASS

.modal-open .modal.modal-center { 
    display: flex!important; 
    align-items: center!important; 
    .modal-dialog { 
     flex-grow: 1; 
    } 
} 

コンパイルされたCSS

.modal-open .modal.modal-center { 
    display: -webkit-box !important; 
    display: -ms-flexbox !important; 
    display: flex !important; 
    -webkit-box-align: center !important; 
     -ms-flex-align: center !important; 
      align-items: center !important; 
} 
.modal-open .modal.modal-center .modal-dialog { 
    -webkit-box-flex: 1; 
     -ms-flex-positive: 1; 
      flex-grow: 1; 
} 

See Woking Demo