Bootstrap 5 中 .modal-header 标题居中需给其本身加 justify-content-center 类，因它是 flex 容器，text-center 对子元素无效；常见失效原因是 display 被覆盖、父级 overflow/position 干扰或第三方样式冲突。
Bootstrap 5 中 .card-header 和 .modal-header 的对齐逻辑不同
.modal-header 默认没有内置文字居中类，它依赖的是 flex 布局 + justify-content: space-between，所以标题（.modal-title）天然左对齐，关闭按钮右对齐。这和 .card-header 不同——后者默认用 text-start，但 Modal 没有提供 text-center 这类文本工具类直接生效。
想让标题居中，不能只给 .modal-title 加 text-center，因为它的父容器 .modal-header 是 flex 容器，text-align 对 flex 子项无效。
- 错误做法：
标题
- 正确思路：改
.modal-header的 flex 主轴对齐方式，或重置其 display 行为 - 最轻量解法：给
.modal-header加justify-content-center类（Bootstrap 5.3+ 内置），前提是它没被其他样式覆盖
给 .modal-header 加 justify-content-center 失效的常见原因
加了类却没居中？大概率是以下某条在起作用：
-
.modal-header被自定义 CSS 强制设了display: block或flex-direction: column，破坏了默认的 flex 行为 - 父级
.modal-dialog或.modal-content设了overflow: hidden或position: relative，间接干扰了 flex 子项渲染 - 用了
fade动画时，.modal.fade .modal-dialog的margin-top: -20px（Bootstrap 默认值）会和居中逻辑冲突 - 第三方组件（如某些 Admin 模板）重写了
.modal-header的 padding/margin，导致 flex 项目无法等距分配空间
验证方式：浏览器开发者工具里检查 .modal-header 是否真实应用了 justify-content: center，且 computed 样式中 display 是 flex。
不依赖类名的纯 CSS 居中方案（兼容旧版本或强定制场景）
如果项目用了定制 Bootstrap 或需支持更老版本，可直接写一行覆盖样式：
.modal-header {
justify-content: center !important;
}
注意三点：
- 必须加
!important，因为 Bootstrap 默认的justify-content: space-between权重高 - 别动
.modal-title的margin，否则它可能被挤出可视区域（尤其配合close按钮时） - 若同时需要隐藏关闭按钮，记得删掉
.close元素，否则justify-content: center会让它和标题叠在一起
移动端 Safari 或动态加载模态框时的特殊处理
在 iOS Safari 上，如果模态框是 JS 动态插入 DOM 后再调用 show()，有时 justify-content-center 会短暂失效——这是渲染时机问题，不是 CSS 错误。
- 不要监听
shown.bs.modal后再 JS 设置style.justifyContent = 'center'，太重且易抖动 - 稳妥做法：确保模态框 HTML 在初始页面就存在（哪怕
display: none），只通过 JS 控制show() - 如果必须动态创建，插入后强制触发一次重排：
modalElement.offsetHeight，再加类 - 极少数情况需补一句
.modal-header { min-width: 0; }，防止 flex 项目因内容过长撑开布局
真正容易被忽略的是：标题居中后，关闭按钮就没了。别忘了要么删掉 .close，要么用 ms-auto 把它拉回右端——否则用户没法关窗。
