bootstrap 5 中只需在 .modal-dialog 上添加 modal-dialog-centered 类即可实现垂直和水平居中，该类内置 top: 50% + transform: translate(-50%, -50%)，无需 js 或额外 css，且必须加在 .modal-dialog 元素上。
modal-dialog-centered 是唯一需要加的类名
Bootstrap 5 官方已内置双居中能力，modal-dialog-centered 就是那个「开箱即用」的类——它同时解决垂直和水平居中，不需要额外写 CSS，也不依赖 JS 计算。这个类必须加在 modal-dialog 元素上，不是 modal，也不是 modal-content。
常见错误写法：<div class="modal modal-dialog-centered"> 或 <code><div class="modal-content modal-dialog-centered">，这两种都无效，因为类的作用目标错了。
<ul>
<li>
<code>modal-dialog-centered 内部使用 top: 50% + transform: translate(-50%, -50%)，天然适配滚动条、缩放、横竖屏切换
modal 的 display 行为，因此不会干扰 backdrop、fade 动画或键盘焦点逻辑为什么 d-flex + align-items-center 在 modal-dialog 上不工作
有人试图给 modal-dialog 加 d-flex align-items-center，结果发现没反应。根本原因是：默认的 modal-dialog 是 position: relative 的块级元素，不是 Flex 容器；align-items-center 只对 Flex 或 Grid 容器的子元素起作用，而这里它自己就是最内层容器，没有子 flex 项可对齐。
更关键的是，Bootstrap 的 fade 动画会主动设置 modal-dialog 的 margin-top，这会直接覆盖掉 align-items-center 的效果。
- 强行改成
display: flex会破坏响应式断点逻辑（比如小屏下自动变窄的宽度控制） -
my-auto同样无效——它依赖父容器是 Flex 且有明确高度，但modal默认不是 Flex 容器 - 真要 Flex 方案，得同时改
modal（加d-flex align-items-center justify-content-center）和重置modal-dialog的 margin，成本远高于直接用modal-dialog-centered
modal-dialog-centered 在动态内容场景下的边界情况
当模态框里嵌入了异步加载的内容（如 CodeMirror、图片、第三方表单组件），首次渲染时高度为 0，加载完成后突然撑高，这时 modal-dialog-centered 不会重新计算位置——但它也不需要重新计算，因为它的定位始终基于视口中心，与内容高度无关。
真正出问题的场景是：内容加载后触发了内部滚动条出现，导致视口可用高度变化，而某些老旧插件或自定义 CSS 覆盖了 modal-dialog 的 transform，造成偏移。
- 检查 DevTools 的 computed styles，确认
transform没被!important覆盖或设为none - 避免给
modal-dialog手动加position: absolute或top/margin-top - 如果用了自定义 backdrop 或 z-index 调整，确保没意外触发
modal的overflow: hidden截断 transform 效果
移动端 Safari 中 modal-dialog-centered 的兼容要点
iOS Safari（尤其 14.x 及更早）对 vh 单位的解析不稳定，但 modal-dialog-centered 不依赖 vh，所以不受影响——它只靠 top: 50% 和 transform，这两个在所有现代浏览器中行为一致。
真正要注意的是：如果你在 modal 外层或 body 上加了自定义样式（比如 min-height: 100vh），可能引发 Safari 下的滚动条错位，进而让 backdrop 遮挡部分内容。这不是 modal-dialog-centered 的问题，而是布局上下文污染。
- 不要给
body或modal加height: 100%或min-height: 100%，它们会干扰原生 modal 的 overflow 控制 - 如果页面顶部有 fixed 导航栏，
modal-dialog-centered依然正确——它定位参考是整个视口，不是页面文档流 - 测试时务必在真机 Safari 上验证，模拟器有时无法复现滚动锚点偏移问题
最常被忽略的一点：modal-dialog-centered 的生效前提是没其他 CSS 强行覆盖它的 top 和 transform 声明。哪怕只有一条 .modal-dialog { transform: none !important; }，整个居中逻辑就失效了。
