Modal标题小屏左对齐、大屏居中需用justify-content-start和justify-content-lg-center；关闭按钮须保留在justify-content-between结构中；modal-dialog-centered无响应式变体，需JS监听断点并调用handleUpdate。
Modal标题在小屏左对齐、大屏居中怎么写
直接用 text-center 对 .modal-header 无效，因为它是 flex 容器，文本类不起作用。得用响应式 flex 类控制主轴对齐：
-
justify-content-start（默认）→ 小屏左对齐 -
justify-content-lg-center→ ≥992px 时覆盖为居中 - 关闭按钮（
.btn-close）必须保留在justify-content-between结构里，否则会错位；可改用justify-content-sm-between justify-content-lg-center，再给.modal-title加flex-grow-1 text-center
.modal-body 文本对齐失效的常见原因
加了 text-sm-start text-md-center 没反应？大概率是父容器干扰了 text-align 生效：
-
.modal-body被包在d-flex容器里（比如手动加了 class），此时text-*类对子元素无效 - 里面嵌了
<form>，某些 UI 库或重置样式强制设了display: block或覆盖text-align - 用 Vue/React 封装时，原生
.modal-bodyclass 没透传或被 scoped style 隔离 - 快速验证：临时加
style="border: 1px solid red"到.modal-body，看边框是否包裹文字——不包说明它被 flex/grid 布局撑开
小屏贴顶、大屏垂直居中必须用 JS 动态切换
modal-dialog-centered 是全断点生效的，没有 modal-dialog-centered-md 这种响应式变体。想实现断点差异，只能监听媒体查询：
- 用
window.matchMedia('(min-width: 992px)')监听断点变化 - 匹配时加
modal-dialog-centered，否则移除 - 每次切换后必须调用
$('#myModal').modal('handleUpdate')，否则高度变化后位置偏移 - 别用
mt-*类模拟——.modal-dialog是fixed定位，mt-5在 iOS 键盘弹出或缩放时完全失准 - 更隐蔽的坑：
.modalDOM 必须在<body>下；如果被挂到某个position: relative的 div 里，所有居中逻辑都会错乱
表单控件水平对齐不能靠 text-* 类
input、select 等表单控件本身不响应 text-align，它们的位置由父容器布局决定：
- 想让整个表单居中：给
<form>加d-flex justify-content-center - 想让
label左对齐、input右对齐：用d-flex justify-content-between - 别在
.modal-body上直接加text-center试图影响表单控件——它只作用于 inline 元素，对块级表单控件无效
真正容易被忽略的是：Modal 的“位置”不是靠 margin 或 top 调出来的，而是由 .modal 的 flex 布局 + .modal-dialog 的 transform 锚点共同决定的；一旦动了 display、position 或把 Modal 插入非 <body> 的容器，就得自己兜底处理所有断点行为。
