如何使用 CSS 垂直集中 Bootstrap V4 模式? [英] How can I vertically centralize a Bootstrap V4 modal with CSS?

问题描述

如何使用 CSS 将 Bootstrap V4 modal 集中起来?

How can I centralize a Bootstrap V4 modal with CSS?

推荐答案

你可以通过像这样覆盖 .modal-dialog 的位置来垂直居中模态..

You can vertical center the modal by overriding the position of the .modal-dialog like this..

.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-centric 类可以用来代替上面描述的自定义方法.

As of Bootstrap 4 Beta 3, there is a new modal-dialog-centered class that can be used instead of the custom method described above.

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

这篇关于如何使用 CSS 垂直集中 Bootstrap V4 模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！