Bootstrap 5 中只需在 .modal-dialog 上添加 modal-dialog-centered 类即可实现垂直居中，其基于 top: 50% + transform: translate(-50%, -50%)，适配滚动条与视口变化，无需 JS 或额外 CSS。
Bootstrap 5 直接加 modal-dialog-centered 就行
bootstrap 5 官方已内置垂直居中方案，不需要 js 计算、不改源码、不写额外 css —— 只要在 .modal-dialog 上加上 modal-dialog-centered 类即可生效。
这个类内部用的是 top: 50% + transform: translate(-50%, -50%)，天然适配滚动条和各种视口尺寸，且不依赖 window.resize 或 show.bs.modal 事件监听。
- ✅ 正确写法：
<div class="modal-dialog modal-dialog-centered"> - ❌ 不要加在
.modal或.modal-content上，只对.modal-dialog生效 - ⚠️ 如果用了
fade动画，确保没手动覆盖.modal.fade .modal-dialog的margin-top，否则会冲突
Bootstrap 3/4 怎么办：JS 居中要防滚动条偏移
旧版本没 modal-dialog-centered，靠 JS 算 top 值时，容易忽略页面已有滚动距离，导致模态框飘到视口上方或被截断。
关键不是“算高度”，而是“拿对参考系”：要用 $(window).height()（可视区高），而不是 $(document).height()（全文档高）；同时要减去当前滚动偏移 $(window).scrollTop()。
- 推荐监听
shown.bs.modal（而非show.bs.modal），确保 DOM 已渲染、尺寸可读 - 计算逻辑应为：
top = ($(window).height() - $dialog.height()) / 2 + $(window).scrollTop() - 别直接设
top，改margin-top更安全（避免与定位样式冲突） - 记得加
$(window).on('resize', ...)，否则横屏切换或缩放时会错位
为什么给 .modal-content 加 my-auto 不行
有人试过在 .modal-content 上加 Bootstrap 的 my-auto 或 align-items-center，发现无效 —— 因为这些是 Flex 工具类，而默认的 .modal-dialog 是 display: block，不是 Flex 容器。
- 若硬要 Flex 方案，得把
.modal-dialog改成class="modal-dialog d-flex align-items-center"，再包一层h-100确保高度撑满 - 但这样会破坏原生 Modal 的宽高响应逻辑（比如小屏下自动变窄），调试成本高于直接用
modal-dialog-centered -
my-auto在非 Flex/非 Table-cell 环境下，本质是margin-top: auto; margin-bottom: auto，对块级元素无垂直居中效果
自定义高度或嵌套 flex 时，modal-dialog-centered 还管用吗
管用，但前提是没手动覆盖它的 transform 行为。常见干扰来自：
- 给
.modal-dialog写了position: absolute或top/margin-top行内样式，会覆盖 transform - 在
.modal-content里用了d-flex，又没设h-100，导致子元素撑不开，看起来“没居中” - Modal 内容本身高度超窗（比如长表单），这时居中的是 dialog 框，不是内容 —— 这属于交互设计问题，不是居中失效
真正容易被忽略的点：如果项目里全局重写了 .modal-dialog 的 transform，或者用了第三方 Modal 封装库（如 bootbox），modal-dialog-centered 可能被样式权重压制，得加 !important 或检查类名是否被替换。
