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 上：
<div class="modal-dialog modal-dialog-centered">
该类通过 margin: auto + flex-direction: column 配合父级 min-height: 100% 实现居中。若仍不生效，检查是否被其他 CSS（如 !important）覆盖。
立即学习“前端免费学习笔记（深入）”；
手动增强 flex 居中逻辑（兼容复杂场景）
当项目有全局样式污染或嵌套在特殊容器中时，可显式强化 flex 行为：
<div class="modal-dialog d-flex align-items-center justify-content-center">
同时确保父级 .modal 满足：
- 高度撑满视口：
min-height: 100%（Bootstrap 默认已设） - 启用 flex 布局：
display: flex（Bootstrap 默认为block，需手动加d-flex到.modal）
示例完整结构：
<div class="modal d-flex" id="myModal"><br> <div class="modal-dialog d-flex align-items-center justify-content-center"><br> <div class="modal-content">...</div><br> </div><br></div>
排查常见干扰源
以下情况容易导致居中失效：
-
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样式
