如何使用CSS垂直集中Bootstrap V4模式？

Question

如何使用CSS集中Bootstrap V4 modal？

Answer 1

Using Flexbox its really easy to add vertical align bootstrap 4 modal popup. Here's the CSS Code.

See Woking Demo

SASS

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

Compiled 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