modal-dialog-centered 是 Bootstrap 5 提供的纯 CSS 双居中方案，仅用 top: 50%、left: 50%、transform: translate(-50%, -50%) 三行实现，必须与 modal-dialog 同级使用，且需确保 DOM 挂载后再初始化模态框。
modal-dialog-centered 就是纯 CSS 解决方案
Bootstrap 5 的 modal-dialog-centered 类本身就是纯 CSS 实现的双居中，不依赖 JS 计算、不调用 resize 监听、也不需要手动写 transform 或 flex。它内部只用了三行关键声明：top: 50%、left: 50%、transform: translate(-50%, -50%)。只要你确认用的是 Bootstrap 5（不是 4.x），这个类就是最轻量、最可靠的选择。
常见误区是以为“纯 CSS”就得自己手写规则——其实官方类就是标准答案，而且比手写更稳：它已适配 backdrop 遮罩、fade 动画帧、移动端 Safari 的 100vh 异常、横竖屏切换等边界情况。
加错位置会导致整个居中逻辑静默失效
modal-dialog-centered 必须和 modal-dialog 在同一个元素上，比如：<div class="modal-dialog modal-dialog-centered">。加在 .modal 或 .modal-content 上完全没用。
-
<div class="modal modal-dialog-centered">→ 无效：.modal 是display: block，不响应transform -
<div class="modal-content modal-dialog-centered">→ 无效：.modal-content 不是定位锚点，没有position: relative基础 - 漏掉
modal-dialog类只写modal-dialog-centered→ 无效：该类无独立语义，必须依附于modal-dialog的上下文
动态创建模态框时，DOM 挂载顺序决定居中是否生效
用 JS 拼 HTML 后直接 new bootstrap.Modal(el).show()，大概率偏上——因为 modal-dialog-centered 的 transform 依赖浏览器完成布局计算，而未挂载 DOM 时，.modal 的 display: flex 和 align-items: center 还没触发渲染。
立即学习“前端免费学习笔记（深入）”；
正确顺序是：
- 先插入 DOM：
document.body.appendChild(modalEl) - 再初始化：
const modal = new bootstrap.Modal(modalEl) - 最后显示：
modal.show()
如果内容含图片或 CodeMirror 等异步加载项，首次居中按空高度计算，加载后不会自动重算——这不是 bug，而是设计使然；modal-dialog-centered 始终基于视口中心定位，与内容尺寸无关。
别用 d-flex + align-items-center 替代 modal-dialog-centered
给 .modal-dialog 加 d-flex align-items-center justify-content-center 看似合理，但实际会破坏默认行为：
-
.modal-dialog默认是position: relative，不是 flex 容器，加了d-flex会覆盖其定位上下文 - fade 动画依赖
.modal.fade .modal-dialog的margin-top: -200px起始值，flex 布局会让这个 margin 失效，导致动画从错误位置开始 - 强行设
height: 100%或min-height: 100vh会干扰响应式断点（如小屏下宽度自动收缩逻辑） - 移动端 Safari 下
100vh因滚动条出现而突变，modal-dialog-centered用top: 50%+translate天然规避该问题
真正需要干预的，只有版本混用（比如引入了 Bootstrap 4 的 CSS）、全局覆盖了 .modal-dialog 的 margin 或 transform，或者在非 Bootstrap 5 环境里硬套这个类名。
