モーダルは縦中央だろ！っていう方に今回、Bootstrap4のモーダルを中央にする方法をご紹介します。

やり方はとても簡単、「modal-dialog」クラスに「modal-dialog-centered」クラスを追加するだけ！

これだけで、ポップアップされるモーダルは縦中央に表示されます。

しかし！表示される際、上からふわっと下がって表示されるのも嫌！って感じしませんか。どうせなら最初から中央にフワッと表示して欲しい。

そんな方には以下のスタイル追加するだけで、ご希望の縦中央からの表示に変更できます。

.modal.fade .modal-dialog.modal-work {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

とても簡単ですね！

是非、お試しあれ！