Bootstrap 5 垂直居中模态框只需在 modal-dialog 元素添加 modal-dialog-centered 类，无需 JS 或额外 CSS；Bootstrap 4.2+ 同样支持；Bootstrap 3 则需通过 show.bs.modal 事件动态计算 margin-top 并监听 resize。
Bootstrap 5 直接加 modal-dialog-centered 就行
bootstrap 5 默认模态框从顶部滑入，不垂直居中；这是设计使然，不是 bug。官方已提供标准解法：modal-dialog 元素上加 modal-dialog-centered 类即可触发 flex 垂直居中逻辑。
- 必须加在
<div class="modal-dialog">上，加在modal或modal-content上无效 - 搭配
modal-lg或自定义宽度也完全兼容，内部会自动计算对齐 - 不需要任何 JS，不依赖窗口 resize 监听，无性能开销
- 注意：如果同时用了
staticBackdrop或scrollable，仍可共存，但不要手动覆盖modal-dialog的display或align-items
Bootstrap 4 跟 5 一样，但文档里藏得深
Bootstrap 4 同样支持 modal-dialog-centered，只是早期版本（4.0–4.1）文档未显式强调，导致很多人绕路写 JS。实际从 4.2 开始已稳定可用。
- 检查你用的 Bootstrap 版本：
$.fn.modal.Constructor.VERSION（浏览器控制台运行） - 若为
4.2+或5.x，直接加类是最简路径，别碰 CSS 或 JS 重定位 - 若项目锁死在
4.0.0，升级到4.6.0（最终维护版）比打补丁更可靠
Bootstrap 3 必须手写 JS 或改 CSS，且滚动条是坑
Bootstrap 3 没有内置居中类，网上流传的“top: 50% + transform”方案在有滚动条时会错位——因为 $(window).height() 不含滚动区域，而 $(document).height() 又包含不可见部分。
- 推荐在
show.bs.modal事件里动态算位置，用$(window).scrollTop()补偿偏移 - 别用
$(document.body).height()算 top，它受 margin collapse 和 doctype 影响，不稳定 - 最简有效写法：
$('.modal').on("show.bs.modal", function() { const $dialog = $(this).find(".modal-dialog"); const top = ($(window).height() - $dialog.height()) / 2 + $(window).scrollTop(); $dialog.css("margin-top", Math.max(50, top) + "px"); }); - 记得加
$(window).on("resize", ...)，否则横屏切换或缩放时会偏
为什么不要全局覆盖 .modal.fade.in { top: xx }
这种 CSS 强制写法看似简单，实则破坏 Bootstrap 的过渡逻辑：模态框入场动画（fade + scale）依赖原始 top 值归零，硬设 top 会导致动画卡顿、遮罩层错位、甚至在 Safari 下闪退。
- 即使看起来“能用”，在 modal 嵌套、动态内容加载、或配合 bootbox 等封装库时大概率失效
- 移动端 viewport 缩放后，固定
top值会彻底失准 - 所有基于静态
top的方案，都绕不开滚动条补偿这个核心难点，JS 动态算才是正解
真正要注意的不是“怎么加居中”，而是“在哪一层加”。Bootstrap 3 和 4/5 的解法本质不同：前者要干预生命周期，后者只需声明意图。混淆版本特性，是 80% 垂直居中失败的根源。
