bootstrap的弹窗剧中_bootstrap弹窗居中处理
时间: 2023-11-26 20:05:59 浏览: 56
bootstrap实现弹窗和拖动效果
要使Bootstrap的弹窗居中显示,你可以使用以下CSS:
```
.modal {
text-align: center;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
```
这段CSS将使用 `text-align` 属性将模态框标题和内容水平居中对齐。然后,使用 `:before` 伪元素创建一个占位符,并使用 `vertical-align` 将其垂直居中对齐。最后,使用 `display: inline-block` 和 `vertical-align` 将模态框本身垂直居中对齐。
请注意,此CSS样式仅适用于Bootstrap 3。如果你使用的是Bootstrap 4,则需要适当调整它以使其有效。
阅读全文