根本原因是font-size未绑定视口，导致modal文字不随窗口缩放；需用clamp()或vmin动态适配，并确保viewport meta、display类型、line-height等协同调整。
font-size没绑定视口，文字就不会缩放
Modal内文字不随窗口变化，根本原因不是对齐类写错了，而是font-size值没和视口挂钩。Bootstrap默认给.modal-title设font-size: 1.5rem，这个值在320px屏和1920px屏上都是约24px——它压根不响应。你加text-center只管水平位置，不解决“字号卡死”问题。
必须用clamp()或vmin把字号锚定到视口：
-
clamp(1rem, 2.5vw, 1.5rem)：小屏保可读（1rem ≈ 16px），中屏线性过渡（2.5vw），大屏防撑破（1.5rem上限） -
3.2vmin：更稳妥，取视口宽高较小值，避免窄高屏（如手机横屏）下文字过大 - 务必确认页面有
<meta name="viewport" content="width=device-width, initial-scale=1">，否则vw/vmin失效 - 别改
:root的font-size，否则rem部分会偏移，影响下限/上限值
text-center在Modal里经常失效，真因是display类型
text-center只对块级或行内元素生效，但.modal-header和.modal-footer默认是display: flex，此时text-center加在父容器上完全无效——这是最常踩的坑。
分场景处理：
- 标题居中：
.modal-header去掉d-flex类，或加justify-content-center（Bootstrap 5.3+） - 标题左对齐 + 关闭按钮右对齐：保留
justify-content-between，给.modal-title加flex-grow-1 text-start -
.modal-body段落居中：确保它没被包在d-flex或grid容器里，直接加text-center即可 - 含图标+文字的按钮：别用
inline-block，改用display: flex; align-items: center，缩放后基线才稳定
缩放后对齐错位，大概率是line-height或white-space没同步适配
字号变了，但line-height: 1.2（带单位）会卡死行高，小屏下文字挤成一团；white-space: nowrap会让长词无法换行，缩放后直接溢出。
必须同步调整：
- 一律用无单位
line-height，比如line-height: 1.4，它会随字号等比缩放 - 检查是否误加了
white-space: nowrap，尤其在.btn或.badge里 -
.modal-dialog如果设了max-width但没配width: 100%，内容区实际宽度会小于预期，text-center看起来就“偏左” - Modal DOM如果不在
直系下（比如挂到某个position: relative的父容器里），所有基于视口的计算都会失准——缩放和对齐同时失效，且难以定位
不同元素要分开调参，clamp()三个值不能套用同一组
标题、正文、辅助文字的视觉节奏不同，同一组clamp(1rem, 2.5vw, 1.5rem)套在.modal-title和.modal-body p上，大概率失衡。
实测建议：
-
.modal-title：用clamp(1.1rem, 3vw, 1.75rem)，突出层级 -
.modal-body > *：用clamp(0.95rem, 2.2vw, 1.25rem)，保证可读性 - 按钮文字：用
clamp(0.875rem, 1.8vw, 1.125rem)，避免小屏过小 - 所有
clamp()都得实测——拿真机跑320px、768px、1200px、1920px四个宽度，看文字是否始终清晰、不溢出、不塌陷
最隐蔽的复杂点在于：Modal内容区若支持拖拽缩放（resize: both），text-center虽仍有效，但.modal-content若设了固定height或max-height，会导致内部文字被裁剪，flex布局也跟着失效。
