Bootstrap4模态框垂直居中

最新推荐文章于 2025-06-22 10:34:51 发布

Alex呆呆

最新推荐文章于 2025-06-22 10:34:51 发布

阅读量3.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： Bootstrap 前端模态框居中 CSS

本文链接：https://blog.youkuaiyun.com/qq_37221649/article/details/87397969

1 篇文章

订阅专栏

本文介绍在Bootstrap4中实现模态框垂直居中的简便方法。只需在.modal-dialog类的div中添加.modal-dialog-centered类即可。文章还分享了作者在尝试其他方案时遇到的问题，包括使用JS调整margin-top属性和修改bootstrap.js源代码的无效尝试。

Bootstrap4模态框默认不会居中显示在浏览器窗口中心而是显示在窗口顶部，在很多情况下这种设计十分不美观。

百度的时候发现能找到的资料都是Bootstrap3的，而这些方法在Bootstrap4上大部分已经不适用了。

在这里先直接给出Bootstrap4上模态框居中的解决方案，后面再补充一些Bootstrap3的方案（自己并没有在Bootstrap3上尝试过）以及自己在Bootstrap4尝试这些方案的时候遇到的部分问题，以供参考。

额，说来惭愧。。。解决方案非常简单，官方文档写的清清楚楚，但是之前就是没有注意到。。。

只需要在添加.modal-dialog类的div再添加一个.modal-dialog-centered就可以了。官方示例代码效果如图，自己测试也完全没有任何问题。

失败方案：

.align-items-center，align-self-center，align-content-center等类可以使元素数值居中，但是对模态框没有效果。
使用js调整模态框margin-top属性使其位于屏幕中心。margin-top = （浏览器窗口高度 - 模态框高度） / 2。
```
function util_set_modal_position() {
    let modal = $("#modal-id");
    let margin_top = ($(window).height() - modal.height()) / 2 + "px";
    //下面三行删除
    alert($(window).height());
    alert(modal.height());
    alert(margin_top);
    //上面三行删除
    modal.css("margin-top", margin_top);
}
```
发现没有效果，百度发现模态框弹出之前是获取不到高度的，实验发现在Bootstrap4中即使模态框弹出也无法获取高度。。。alert(modal.height())的值为0或者一个很小的负数，暂时还不清楚是什么。
修改bootstrap.js源代码，这是原文链接，这里是Bootstrap3的源代码，Bootstrap4和它有些差异（对应代码2422行左右的位置），自己只是个前端菜狗，JavaScript都没怎么学过，自己改起来有点费劲，索性懒得改了，大佬们可以自己改一下。这种修改源代码的方法还有一个弊端就是不能使用CDN导入Bootstrap。
其他失败方案就不写了，方正都是失败的，也没卵用。。。