直接用clamp()控制字号并配合viewport标签和正确display类型，文字即可随窗口缩放对齐；text-center在flex容器中无效，需用justify-content-center等flex类替代，且line-height必须用无单位值、禁用white-space: nowrap以避免错位。
直接用 clamp() 控制字号，配合正确的容器 display 类和 viewport 设置，文字就能随窗口缩放并保持对齐。别指望 Bootstrap 自带类解决这个问题——它压根没提供响应式字体能力。
为什么 text-center 加了也不居中？
因为 .modal-header 默认是 display: flex，text-center 对 flex 容器的子元素无效。你加在父级上，实际起作用的是 justify-content。
- 标题想居中：给
.modal-header加justify-content-center（Bootstrap 5.3+），或移除d-flex后加text-center - 标题左对齐 + 关闭按钮右对齐：保留
justify-content-between，再给.modal-title加flex-grow-1 text-start -
.modal-body加text-center没反应？先检查它是否被包在d-flex或form里——这些会覆盖text-align行为
怎么让字号真正随窗口变化？
固定 font-size: 1.5rem 在手机上还是 24px，在 4K 屏上也还是 24px。必须用视口单位锚定，clamp() 是目前最稳的选择。
- 标题推荐：
font-size: clamp(1.1rem, 3vw, 1.75rem) - 正文段落推荐：
font-size: clamp(0.95rem, 2.2vw, 1.25rem) - 务必确认页面有
<meta name="viewport" content="width=device-width, initial-scale=1">，否则vw会失效 - 别改
:root的font-size——Modal 内字号应独立控制，否则整个页面文字都会变形
缩放后对齐错位、换行异常怎么办？
字号变了，但 line-height: 1.2em 或 white-space: nowrap 还卡着旧值，就会挤成一团或横向溢出。
- 行高必须用无单位值：
line-height: 1.4（不是1.4rem或20px） - 禁用
white-space: nowrap，尤其在按钮、标签或图标文字组合里 - 含图标+文字的结构，别用
inline-block——缩放后基线偏移，统一改用display: flex; align-items: center -
.modal-dialog如果设了max-width却没配width: 100%，text-center看起来会“偏左”，因为内容区实际宽度小于预期
最隐蔽的坑是 Modal DOM 不在 <body> 直系下——比如被 Vue/React 挂到某个 position: relative 的 wrapper 里，所有基于视口的计算（vmin、transform、flex 居中）都会失准，缩放和对齐同时失效，且很难定位根源。
