Как я могу вертикально централизовать модуль Bootstrap V4 с помощью CSS?

Ответ 1

Вы можете вертикально центрировать модальный, переопределяя положение .modal-dialog, как это.

.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

Начиная с Bootstrap 4 Beta 3, существует новый класс modal-dialog-centered, который можно использовать вместо настраиваемого метода, описанного выше.

https://www.codeply.com/go/lpOtIFoN6E (бета 3)

Ответ 2

Используя Flexbox, его очень легко добавить вертикальное выравнивание бутстрапа 4 модального всплывающего окна. Здесь CSS-код.

См. демонстрацию Woking

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;
}

См. демонстрацию Woking