Modal 默认水平居中，因 Bootstrap 5 的 .modal 已通过 display: flex + justify-content: center 实现，无需额外操作；常见“偏左”实为 .modal-dialog 宽度不足或父容器干扰所致。
Modal 默认就是水平居中，不需要额外操作
bootstrap 5 的 .modal 默认已通过 display: flex + justify-content: center 实现水平居中，只要没被自定义样式破坏，它在所有屏幕尺寸下都自动居中。常见误判是看到模态框“偏左”，其实问题出在：.modal-dialog 宽度太小、内容撑开后视觉失衡，或父容器（比如某个 position: relative 的 wrapper）干扰了定位基准。
为什么加了 width 后 Modal 不居中了
直接给 .modal-dialog 设置固定宽度（如 width: 600px）会覆盖 Bootstrap 响应式断点逻辑，导致 margin: auto 失效——因为 margin: auto 水平居中只对块级元素在父容器有明确宽度时有效，而 .modal 默认是 flex 容器，不依赖 margin。
- 错误写法：
<div class="modal-dialog" style="width: 600px">—— 破坏 flex 居中机制 - 正确做法：用 Bootstrap 内置宽度类，如
modal-dialog-scrollable+mw-100或响应式w-sm-100 w-md-75 w-lg-50 - 若必须自定义宽度，应配合
mx-auto（而非margin-left手动算），且确保父级.modal未被设为display: block
移动端 Safari 或缩放页面下居中偏移怎么办
部分 iOS Safari 在页面缩放或横竖屏切换后，.modal-dialog 的 transform 或 top 计算可能滞后，导致短暂偏移。这不是 bug，而是浏览器重绘时机问题。
- 不要监听
resize并手动重设margin-top——这会触发强制重排，反而加剧抖动 - 优先用
modal-dialog-centered类，它基于top: 50%+transform: translateY(-50%)，比 JS 计算更稳定 - 如果用了动态插入的 Modal（如 Vue/React 渲染后 show），确保在
shown.bs.modal事件回调里再触发一次getComputedStyle读取，强制同步布局
嵌套在非 body 下时居中失效
Modal 默认 append 到 document.body，此时居中基准是视口。但如果手动把 Modal HTML 插入到某个局部容器（比如 <div id="app">），而该容器设置了 position: relative 或 overflow: hidden，就会让 .modal-dialog 相对于该容器定位，而非整个视口。
- 检查 DOM 结构：确认
.modal确实位于body直接子节点（可用浏览器开发者工具查看） - 避免用
appendTo或container选项指向非 body 元素，除非你明确需要局部居中 - 若必须嵌套，需同时给父容器加
position: relative+height: 100vh，否则 flex 居中无高度参考
.modal-dialog 的 display、position 或父级布局，就等于绕开了这个机制，得自己兜底。** 
