css - 如何使用 CSS 垂直集中 Bootstrap V4 模态？

Question

<分区>

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

https://www.codeply.com/go/lpOtIFoN6E (测试版 3)