Bootstrap Modal 不居中通常因外部样式干扰、父容器限制或自定义类破坏 flex 布局；应确保结构规范、避免覆盖居中样式，优先使用 modal-dialog-centered 类，复杂场景可手动添加 d-flex、align-items-center 和 justify-content-center。
Bootstrap Modal 默认是居中的，如果出现不居中问题，通常是因为外部样式干扰、父容器限制（如 position: fixed 或 transform 影响）、或自定义类覆盖了默认的 flex 布局逻辑。核心解决思路是确保 .modal-dialog 能正确使用 Flex 布局在视口内垂直 + 水平居中。
确认 modal 结构是否符合 Bootstrap 5+ 规范
Bootstrap 5 开始依赖 Flex 实现居中，必须保证 HTML 结构完整且层级正确：
-
.modal必须有display: block和position: fixed（由 Bootstrap 自带） -
.modal-dialog必须是.modal的直接子元素，且不能被额外的 wrapper 包裹 - 避免在
.modal或.modal-dialog上写死top/left、transform、margin等会破坏居中的 CSS
用 modal-dialog-centered 类快速修复 垂直居中
Bootstrap 内置了专门用于垂直居中的 工具 类，只需加在 .modal-dialog 上：
该类通过 margin: auto + flex-direction: column 配合父级 min-height: 100% 实现居中。若仍不生效，检查是否被其他 CSS（如 !important）覆盖。
立即学习 “ 前端免费学习笔记（深入）”；
手动增强 flex 居中逻辑（兼容复杂场景）
当项目有全局样式污染或嵌套在特殊容器中时，可显式强化 flex 行为：
同时确保父级 .modal 满足：
- 高度撑满视口：
min-height: 100%（Bootstrap 默认已设）
- 启用 flex 布局：
display: flex（Bootstrap 默认为 block，需手动加 d-flex 到 .modal）
示例完整结构：
……
排查常见干扰源
以下情况容易导致居中失效：
- body 被加了
overflow: hidden 但 modal 未触发 body 滚动锁定：检查是否漏掉 data-bs-backdrop 或 JS 初始化异常
- 自定义 SCSS 中修改了
$modal-dialog-margin 或 $modal-content-border-radius：重置或重新编译变量
- 使用了第三方插件（如 Scrollbar、Sticky Header）动态修改了
html/body 的 padding-right：可在 modal 显示后手动修正 body 样式
