如何将 Bootstrap V4 模态与 CSS 垂直集中？

Question

如何将 Bootstrap V4 modal 集中到 CSS？

Answer 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 class 可以用来代替上述自定义方法。

https://www.codeply.com/go/lpOtIFoN6E（测试版 3）

Answer 2

使用 Flexbox 非常容易添加垂直对齐 bootstrap 4 模态弹出窗口。这是 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

如何将 Bootstrap V4 模态与 CSS 垂直集中？

How can I vertically centralize a Bootstrap V4 modal with CSS?

css

twitter-bootstrap-4

bootstrap-4