modal-dialog-centered 类必须加在 .modal-dialog 元素上才能实现垂直居中，bootstrap 5 内置支持，bootstrap 4 不支持，需手动补 flex 布局或降级方案。
modal-dialog-centered 类必须加在 .modal-dialog 上
它不是可选修饰，而是垂直居中的开关——漏掉这个类，modal 就永远停在顶部。很多人检查 CSS、调 transform、改 top，最后发现只是少写了一个类名。
注意几个硬性前提：
-
modal-dialog-centered必须和modal-dialog在同一个元素上，比如<div class="modal-dialog modal-dialog-centered"> <li>只加 <code>modal-dialog-centered不加modal-dialog无效（类名无绑定上下文） - 不要把它加到外层
modal容器或modal-content上，位置错就完全不触发 - Bootstrap 5 已内置该类逻辑，无需引入额外 JS 或 CSS
- 手动补 CSS：给
.modal-dialog加display: flex; align-items: center; min-height: calc(100% - 2rem);，再确保.modal有display: flex和justify-content: center - 避免用
top: 50%+transform直接作用于.modal-dialog：动画过程中会抖动，且被.modal { overflow: hidden }切掉上半部分 - 别设死
min-height: 100vh：移动端 Safari 下滚动条出现时视口高度突变，导致错位；calc(100% - 2rem)更稳 - 先用
document.body.appendChild(modalEl)或 jQuery 的.appendTo('body')挂载 - 再初始化实例：
const modal = new bootstrap.Modal(modalEl) - 最后调用
modal.show() - 如果用
fade动画，确保自定义居中类加在.modal-dialog上，而非外层.modal，否则动画帧里 flex 未就绪 - 加
modal-dialog-scrollable类（Bootstrap 5 内置），让.modal-body可滚动，.modal-header和.modal-footer固定 - 不要试图用
max-height+overflow-y: auto手动加在.modal-content上：会破坏 flex 居中流式计算 - IE11 用户？放弃
modal-dialog-centered：它依赖transform+flex，必须写回退样式，比如 JS 计算margin-top
Bootstrap 4 不支持 modal-dialog-centered 类
如果你用的是 Bootstrap 4（哪怕 4.6.x），直接加 modal-dialog-centered 没反应——它真不存在。官方没提供，也不能靠升级 minor 版本“修出来”。
替代方案只有两个靠谱路径：
动态创建的模态框调用 show() 前必须已挂载 DOM
用 JS 创建 modal 节点后直接 new bootstrap.Modal(el).show()，大概率失败——modal-dialog-centered 依赖父容器 .modal 的 flex 布局完成渲染，而未插入 DOM 时，浏览器还没计算 flex 对齐行为。
正确顺序是：
内容过高时 modal-dialog-centered 会自动上移，但不滚动
当模态框内容高度超过视口，modal-dialog-centered 不会强行居中并截断，而是把整个 .modal-dialog 往上推，顶部贴住视口边缘——这是设计行为，不是 bug。
这时你需要：
最容易被忽略的一点：移动端 Safari 在弹出键盘后会重排视口高度，modal-dialog-centered 不会自动响应。得监听 resize 事件，在回调里手动触发 modal.handleUpdate() 或重新设置 transform ——但前提是你的模态框已经用 JS 实例化，静态 HTML 弹窗做不到这点。
