Modal内文字不随窗口缩放的本质是font-size未绑定视口，需用clamp(1rem, 2.5vw, 1.5rem)实现弹性缩放，并配合viewport标签和无单位line-height，同时区分容器display类型协同控制对齐。
Modal内文字不随窗口缩放，本质是字号没绑定视口，而不是对齐方式错了。 对齐（text-center）只管水平位置，缩放（font-size）才决定文字是否“跟着窗口变”。两者必须分开控制、协同生效。
用clamp()替代固定font-size，不是“让文字变小”，而是守住可读区间
Bootstrap默认给.modal-title设font-size: 1.5rem，这个值在320px宽屏上约24px，在1920px屏上还是24px——它不响应。换成clamp(1rem, 2.5vw, 1.5rem)后：
-
1rem是下限（防超小屏文字不可读） -
2.5vw是弹性中间值（视口宽度每增100px，字号增2.5px） -
1.5rem是上限（防超大屏文字撑破Modal）
关键点：必须搭配<meta name="viewport" content="width=device-width, initial-scale=1">，否则vw单位会失效；别在:root里全局改font-size，否则rem部分会偏移。
text-align在Modal里经常失效，真正起作用的是容器的display类型
.modal-header和.modal-footer默认是display: flex，此时text-center对子元素无效。常见错误写法：<div class="modal-header text-center"><h5 class="modal-title">标题</h5></div>——标题依然左对齐。
正确做法分场景：
- 标题居中：去掉
.modal-header的d-flex类，或加justify-content-center（Bootstrap 5.3+） - 标题左对齐 + 关闭按钮右对齐：保留
justify-content-between，给.modal-title加flex-grow-1 text-start -
.modal-body段落居中：确保它没被包在d-flex容器里，直接加text-center即可
缩放后对齐错位，大概率是line-height或white-space没同步适配
字号变了，但line-height: 1.2（带单位）会卡死行高，导致小屏文字挤成一团；white-space: nowrap会让长词无法换行，缩放后直接溢出。
必须统一用无单位line-height（如line-height: 1.4），并检查：
- 是否误加了
white-space: nowrap（尤其在按钮或标签内） - 含图标+文字的组合是否用了
display: inline-block——缩放后基线偏移，应改用display: flex; align-items: center -
.modal-dialog是否设了max-width但没配合width: 100%，导致内容区实际宽度小于预期，text-center看起来“偏左”
最隐蔽的坑：Modal DOM如果不在<body>直系下（比如被挂到某个position: relative的父容器里），所有基于视口的计算（vmin、transform、flex居中）都会失准——缩放和对齐同时失效，且难以定位。
