Bootstrap 5 模态框垂直居中必须将 modal-dialog-centered 类加在 .modal-dialog 元素上，缺省 modal-dialog 基础类、加错位置、用于 Bootstrap 4 或更低版本均会失效。
Bootstrap 5 模态框垂直居中，只用 modal-dialog-centered 类就行，但必须加在 <div class="modal-dialog"> 上——加错位置、漏掉 modal-dialog 基础类、或用在 Bootstrap 4 及更早版本，都会完全失效。
modal-dialog-centered 必须加在 .modal-dialog 元素上
这个类不是“可选修饰”，而是 Bootstrap 5 垂直居中的开关。它内部依赖 .modal 的 display: flex 和 align-items: center，再配合 .modal-dialog 自身的 position: relative、top: 50% 与 transform: translate(-50%, -50%) 组合生效。
- ✅ 正确写法：
<div class="modal-dialog modal-dialog-centered"> - ❌ 错误写法：
<div class="modal modal-dialog-centered">（.modal是display: block，不响应transform） - ❌ 错误写法：
<div class="modal-content modal-dialog-centered">（.modal-content不是定位锚点，样式规则压根不匹配） - ⚠️ 注意：如果只写
modal-dialog-centered，不带modal-dialog，CSS 选择器无法命中，整个类等于没写
用了 fade 动画时，别覆盖 .modal-dialog 的 margin-top
Bootstrap 的 fade 动画会为 .modal.fade .modal-dialog 设置初始 margin-top: -200px（具体值可能因版本微调），让模态框从顶部滑入。如果你在自定义 CSS 里写了 .modal-dialog { margin-top: 0 } 或 !important，就会和 modal-dialog-centered 的 transform 冲突，导致位置偏移甚至动画卡顿。
- 检查开发者工具中，
.modal-dialog计算后的margin-top是否仍为负值（非0） - 避免全局重置：
.modal-dialog { margin: 0 }这类写法会直接破坏动画逻辑 - 如需微调起始高度，优先改
transition时长或延迟触发，而不是硬覆盖margin
动态创建模态框时，DOM 必须先挂载再调用 show()
用 JS 拼 HTML 后直接 new bootstrap.Modal(el).show()，大概率失败。因为 modal-dialog-centered 虽不依赖尺寸计算，但 .modal 的 flex 布局、backdrop 高度、滚动锁定等逻辑会在 show() 前读取 .modal-dialog 的 offsetHeight。未挂载 DOM 时该值为 0，尤其在移动端 Safari 下易引发视口重算异常。
立即学习“前端免费学习笔记（深入）”；
- 正确顺序：
document.body.appendChild(modalEl)→ 等待 DOM 更新（可用requestAnimationFrame或setTimeout(() => {}, 0)）→ 再初始化并调用show() - 更稳妥做法：监听
shown.bs.modal事件，确认渲染完成后再做后续操作 - 内容含图片、远程表单等异步加载项时，首次居中失败往往不是类名问题，而是 DOM 渲染时机不对
内容过高时 modal-dialog-centered 会自动上移，不是 bug
当模态框内容总高度超过视口，modal-dialog-centered 不会强行居中并截断，而是把整个 .modal-dialog 往上推，顶部贴住视口边缘——这是设计行为。
- 此时应配合
modal-dialog-scrollable类，让内容区可滚动，同时保持标题/按钮固定 - 不要试图用
min-height: 100vh强撑父容器，.modal本身不依赖这个 - IE11 不支持该类（因依赖
transform+flex），若需兼容，得额外写回退样式，比如基于top: 50%+margin-top: -[half-height]的 JS 计算方案
最容易被忽略的是：你可能正在用 Bootstrap 4，而 modal-dialog-centered 在 4.x 版本里根本不存在——它只属于 Bootstrap 5+。查一下 bootstrap.min.css 文件里有没有这个类名，比反复调试 CSS 更快。
