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 样式