modal 默认水平居中，因 .modal 为 flex 容器且 justify-content: center；垂直居中需显式添加 modal-dialog-centered 类，依赖 top: 50% + transform: translatey(-50%)；标题和按钮居中应使用 justify-content-center，而非 text-center；移动端 safari 偏移需靠 modal-dialog-centered 和 shown.bs.modal 中强制同步布局解决。
Modal 默认就水平居中，别乱加 margin
Bootstrap 5 的 .modal 默认是 display: flex 容器，靠 justify-content: center 实现水平居中，所有断点下都生效。所谓“不居中”，90% 是因为：
• 直接给 .modal-dialog 设了固定 width（比如 width: 600px），覆盖了响应式断点逻辑，导致 margin: auto 失效
• .modal 被手动插入到非 的容器里（如某个 position: relative 的 div），使居中基准变成该容器而非视口
• 自定义 CSS 覆盖了 .modal 的 display: flex 或改了 .modal-dialog 的 position
垂直居中必须显式加 modal-dialog-centered
默认的 Modal 只水平居中、垂直靠顶。modal-dialog-centered 是唯一可靠方案，它用 top: 50% + transform: translateY(-50%) 实现，天然适配滚动、缩放、横竖屏切换。
• 不要用 mt-5 或 JS 计算 margin-top —— iOS 键盘弹出或页面缩放时会完全错位
• 没有 modal-dialog-centered-md 这类响应式变体；想“小屏贴顶、大屏居中”，得用 window.matchMedia 监听断点，动态增删该 class，并调用 handleUpdate
• 如果 Modal DOM 不在 下，这个 class 也会失效，必须确保父容器有明确高度（如 height: 100vh）且 position: relative
标题、按钮、内容对齐别用 text-center 硬套
.modal-header 和 .modal-footer 都是 flex 容器，text-center 对子元素无效。
• 标题居中：给 .modal-header 加 justify-content-center（Bootstrap 5.3+ 内置）
• 底部按钮居中：直接给 .modal-footer 加 justify-content-center，别包额外 div
• 主体内容居中：.modal-body 是块级元素，text-center 有效；但如果它被包在 d-flex 容器里或内部含 <form></form>，text-align 就会失效——此时边框验证法最管用：加 style="border: 1px solid red" 看是否包裹文字
移动端 Safari 缩放后偏移不是 bug，是重绘时机问题
iOS Safari 在横竖屏切换或页面缩放后，.modal-dialog 的 transform 或 top 值可能短暂滞后，造成视觉偏移。
• 别监听 resize 并手动重设 margin-top —— 强制重排会让抖动更明显
• 优先用 modal-dialog-centered，它的 CSS 方案比 JS 更稳定
• 如果 Modal 是动态渲染（Vue/React），确保在 shown.bs.modal 回调里触发一次 getComputedStyle 读取，强制同步布局
.modal 的 display、.modal-dialog 的 position，或者把 Modal 插进局部容器，就得自己兜底。
