Bootstrap 5 Modal 默认水平居中，失效主因是居中基准被改：.modal-dialog的margin: auto被覆盖、.modal未直挂body（如嵌入position: relative容器）、或BS4/BS5 CSS混用；modal-dialog-centered仅垂直居中，不干预水平。
为什么 modal 看起来没水平居中
根本不是 Bootstrap 忘了居中，而是居中基准被改了。.modal-dialog 的 margin: auto 没生效，常见原因有三个：
– .modal-dialog 被加了 margin-left、left 或 transform，直接覆盖了 margin: auto
– .modal 没挂载在 body 下，而是塞进了某个 position: relative 的父容器里，此时 margin: auto 是相对于那个父容器居中，不是视口
– 混用了 Bootstrap 4 和 5 的 CSS：BS4 依赖固定宽度 + margin: 10px auto，BS5 改用 display: flex + justify-content: center，混用会导致计算冲突
检查 .modal 的 display 和 justify-content 是否正常
打开浏览器 DevTools，选中 .modal 元素，看 computed 样式：
– display 必须是 flex（Bootstrap 5 默认值）
– justify-content 必须是 center
– 如果是 block 或 grid，说明被其他 CSS 覆盖了；如果 justify-content 是 flex-start，大概率是全局重置样式或第三方 UI 库干扰了
强制恢复水平居中的最简 CSS
当其他方式都失效（比如嵌套在 Vue/React 组件里、CSS 被深度覆盖），直接重置 .modal-dialog 的左右外边距：
.modal-dialog {<br> margin-left: auto !important;<br> margin-right: auto !important;<br>}注意：
– 必须加
!important，因为 Bootstrap 的 fade 动画会内联写 margin-top，同理它也可能干扰 margin-left– 别只写
margin: 0 auto，这会把 margin-top 也清掉，破坏垂直动画起始位置– 如果模态框宽度是动态的（如
max-width: 90%），margin: auto 依然有效；但若设了 width: 600px 且父容器窄于 600px，就会溢出，此时需配合 overflow-x: hidden 或响应式断点控制
modal-dialog-centered 不解决水平偏移
modal-dialog-centered 只负责垂直居中，对水平方向完全不干预。它的作用是给 .modal-dialog 加 top: 50% 和 transform: translateY(-50%)，水平仍靠 .modal 的 justify-content: center。
所以：
– 不要指望加了 modal-dialog-centered 就能“修复”水平不居中——那是治标不治本
– 如果水平已偏移，加这个类只会让一个偏左的框再垂直居中，问题更明显
– 它必须加在 .modal-dialog 上，加在 .modal 或 .modal-content 上无效
真正容易被忽略的是：水平居中失效往往不是 Bootstrap 的问题，而是模态框被塞进了某个有 position: relative 的局部容器里——哪怕 CSS 写得再准，只要 DOM 没挂在 body 下，所有居中逻辑都会失效。
