modal-dialog-centered 必须加在 .modal-dialog 元素上，依赖 .modal 的 flex 布局（display: flex; align-items: center），内容过高时自动上移，可与 modal-dialog-scrollable 共存。
modal-dialog-centered 必须加在 .modal-dialog 元素上
Bootstrap 5 的 .modal 默认只水平居中，垂直方向是顶部对齐——这不是 bug，是设计如此。真正起作用的类只有 modal-dialog-centered，但它**必须写在 <div class="modal-dialog"> 这一层**，加在 <code>.modal 或 .modal-content 上完全无效。
常见错误写法：<div class="modal modal-dialog-centered"> 或 <code><div class="modal-content modal-dialog-centered"> → 不生效。<p>正确结构示例：</p><pre class="brush:php;toolbar:false;"><div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered"> <!-- ✅ 只有这里加 -->
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body"></div>
</div>
</div>
</div></pre><h3>modal-dialog-centered 依赖父容器的 flex 布局</h3>
<p><code>modal-dialog-centered 内部用的是 top: 50% + transform: translate(-50%, -50%)，它能生效的前提是 .modal 元素已启用 flex 布局并设置了 align-items: center。Bootstrap 5 默认已内置这些样式，但以下情况会破坏它：
- 手动覆盖了
.modal的display或align-items - 给
.modal加了overflow: hidden（可能切掉上半部分） - 在
.modal.fade .modal-dialog上重写了margin-top（会和 fade 动画冲突）
如果发现加了类仍不居中，用浏览器 DevTools 检查 .modal 的 computed display 是否为 flex，align-items 是否为 center。
内容过高时自动上移，不是 bug 是预期行为
当模态框内容高度超过视口时，modal-dialog-centered 不会强制截断或滚动，而是让整个 .modal-dialog 向上偏移，确保顶部不超出屏幕。这是它的默认策略。
若需要内容可滚动且保持居中视觉，得额外加 modal-dialog-scrollable 类：
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
注意：modal-dialog-scrollable 和 modal-dialog-centered 可共存，但后者仍负责初始定位逻辑；滚动后，顶部锚点会变化，此时居中仅体现在首次弹出瞬间。
移动端 Safari 需要 resize 监听？其实不用
早期资料提到 iOS Safari 在横竖屏切换后需手动重置 transform，但现代版本（iOS 15+）已修复该问题。modal-dialog-centered 基于 top: 50% + transform，本身适配视口变化，无需 JS 监听 resize 或 show.bs.modal 事件。
唯一需要 JS 干预的场景是：模态框为动态创建（比如用 document.createElement），且在挂载 DOM 前就调用了 show() —— 此时元素无尺寸，transform 计算失败。解决办法很简单：
- 先
appendChild到 body - 再调用
new bootstrap.Modal(...).show()
这个顺序错不了，但容易被忽略。
