如何使用CSS将Bootstrap V4模态框居中显示?
如何使用CSS将Bootstrap V4模态框居中显示?
.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
类可用,可以代替上述自定义方法。
和
transform: translateY(-50%)`)。 - Carol Skelly使用Flexbox,将Bootstrap 4模态弹出窗口垂直对齐非常容易。以下是CSS代码。
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;
}