modal-dialog-centered 必须加在 .modal-dialog 上，加错位置（如 .modal 或 .modal-content）会导致居中失效；它依赖 .modal 的 flex 布局、.modal-dialog 的 transform 定位及未被覆盖的 margin-top: -20px。
modal-dialog-centered 必须加在 .modal-dialog 上
加错位置是居中失效的最常见原因。这个类只对 .modal-dialog 元素生效，因为它的实现依赖该元素的定位上下文和 transform 行为。加在 .modal 或 .modal-content 上完全无效——前者默认是 display: block，不响应 transform；后者只是子容器，没被设计为定位锚点。
检查你当前结构是否符合标准：
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered"> <!-- ✅ 正确位置 -->
<div class="modal-content">
...
</div>
</div>
</div>- 不要写成
<div class="modal modal-dialog-centered"> - 也不要写成
<div class="modal-content modal-dialog-centered"> - 如果用 JS 动态创建模态框（比如拼 HTML 后
append()），必须先挂载到 DOM，再调用modal('show')，否则offsetHeight读不到真实尺寸，导致后续样式计算失准
fade 动画会覆盖 modal-dialog-centered 的定位
Bootstrap 默认的 .modal.fade .modal-dialog 有 margin-top: -20px，这是为淡入动画准备的起始偏移。如果你手动写了 CSS 覆盖了这个值（比如设成 0 或其他固定值），就会和 modal-dialog-centered 的 top: 50% + transform 冲突，造成位置偏移或抖动。
- 用浏览器 DevTools 检查
.modal.fade .modal-dialog的 computedmargin-top是否仍为-20px - 如果用了自定义 fade 动画，确保没有重置该选择器的
margin-top - 不要给
.modal-dialog单独加margin-top或top，它靠transform定位，不是传统偏移
父级 .modal 的 display 或 align-items 被意外覆盖
modal-dialog-centered 能生效的前提是 .modal 元素保持默认的 display: flex 和 align-items: center。一旦被自定义样式覆盖（比如加了 display: block、overflow: hidden 或重写了 align-items），整个居中逻辑就断了。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools，检查
.modal的 computeddisplay是否为flex，align-items是否为center - 第三方 Admin 模板常偷偷改
.modal的display，尤其在移动端适配时 - 避免给
.modal加position: relative或transform，这会创建新的定位上下文，干扰.modal-dialog的top: 50%计算
动态加载内容后高度突变，但 modal-dialog-centered 不重算
这个类本身不监听 DOM 尺寸变化，它始终基于视口中心定位，与内容高度无关——所以首次加载空内容、后续 AJAX 填充长文本/图片/CodeMirror 组件时，不会“重新居中”。这不是 bug，是预期行为：只要 .modal-dialog 的 transform 没被覆盖，它就一直钉在视口正中。
- 如果内容撑高后顶部被切掉，大概率是
.modal或.modal-dialog被加了overflow: hidden，或者.modal-content缺少max-height+overflow-y: auto - 不需要 JS 监听
shown.bs.modal去手动调整，那反而可能破坏原生逻辑 - 真要响应式撑高，优先用
.modal-dialog-scrollable配合.modal-body内部滚动，而不是指望居中类“追着高度跑”
真正容易被忽略的是：这个类看似简单，但它背后依赖一整套未显式声明的布局前提——.modal 的 flex 行为、.modal-dialog 的相对定位、无干扰的动画 margin、以及不被覆盖的 transform。任何一个环节断掉，都会让 modal-dialog-centered “静默失效”。
