bootstrap 5 modal 默认水平居中，只需确保 .modal-dialog 未被 margin-left/left/transform 等样式覆盖，且父容器为 body、.modal 的 display 为 flex 并启用 justify-content: center；modal-dialog-centered 仅负责垂直居中，不影响水平居中逻辑。
bootstrap 5 的 modal 默认就是水平居中显示的，不需要额外操作——只要没手动破坏 .modal-dialog 的 margin: auto 或父容器 .modal 的 display: flex 布局。
为什么 modal 看起来没水平居中？
常见现象是模态框靠左、偏移、或随屏幕缩放错位。根本原因不是“没居中”，而是居中基准被改了：
-
.modal-dialog被加了margin-left/left/transform等覆盖样式，直接压过了margin: auto -
.modal的父容器不是body（比如模态框被插进某个position: relative的 div 里），此时margin: auto会相对于那个父容器居中，而不是视口 - 混用了 Bootstrap 4 和 5 的 CSS：BS4 依赖
margin: 10px auto+ 固定宽度，BS5 改为flex+justify-content: center，混用会导致计算冲突 - 动态插入后立即
show()，DOM 尚未完成渲染，.modal-dialog宽度为 0，margin: auto没生效对象
modal-dialog-centered 不是用来解决水平居中的
modal-dialog-centered 只负责垂直居中，它对水平方向完全不干预。它的作用是给 .modal-dialog 加 top: 50% 和 transform: translateY(-50%)，水平仍靠 .modal 的 justify-content: center。所以：
- 不要指望加了
modal-dialog-centered就能“修复”水平不居中——那是治标不治本 - 如果水平已偏移，加这个类只会让一个偏左的框再垂直居中，问题更明显
- 检查浏览器 DevTools 中
.modal的 computeddisplay是否为flex，justify-content是否为center
真要强制水平居中，只改 .modal-dialog 的 margin
当其他方式都失效（比如嵌套在第三方组件里、CSS 被深度覆盖），最直白有效的方法是手动重置 .modal-dialog 的左右外边距：
.modal-dialog {
margin-left: auto !important;
margin-right: auto !important;
}
注意点：
- 必须加
!important，因为 Bootstrap 的fade动画会内联写margin-top，同理它也可能干扰margin-left - 别只写
margin: 0 auto——这会把margin-top也重置掉，影响垂直动画起始位置 - 如果模态框宽度是动态的（比如
max-width: 90%），margin: auto依然有效；但若设了width: 600px且父容器窄于 600px，就会溢出，此时需配合overflow-x: hidden或响应式断点控制
真正容易被忽略的是：水平居中失效往往不是 Bootstrap 的问题，而是模态框被塞进了某个有 position: relative 或 display: grid 的父容器里——这时它就不再相对于视口居中，而相对于那个父容器。查 DOM 结构比调 CSS 更快定位根源。
