text-center 在小屏不居中是因为它等价于 text-xs-center，从最小断点起全局生效，无法自动退回到左对齐；需用断点类组合（如 text-start text-md-center）实现响应式居中。
text-center 为什么在小屏上不居中？
因为 text-center 等价于 text-xs-center，它从最小断点开始生效，一旦加上就锁死所有尺寸——小屏不会“自动退回到左对齐”，除非你显式覆盖。直接写 text-center 就等于放弃响应式控制。
真正要实现“不同分辨率下自动居中”，必须用断点类组合，让浏览器按视口宽度动态选择：先设基础行为（比如小屏左对齐），再逐级覆盖更大尺寸的对齐方式。
-
text-start：xs 尺寸（ -
text-md-center：≥768px（md 及以上）才居中，覆盖前面的text-start -
text-xl-center：如果只希望超大屏居中，而中屏保持左对齐，那就跳过 md，直接写text-xl-center
Flex 容器里 text-center 失效的典型场景
当文字被包在 d-flex、justify-content-between 或任何启用 Flex 的父容器里时，text-center 基本无效——text-align 只作用于块级流内元素，Flex 子项已脱离该流。
此时对齐逻辑由父容器的 Flex 属性决定，不是子元素的文本样式。
- 想让 Flex 容器内单行文字水平+垂直居中：用
justify-content-center align-items-center - 想让文字居中、旁边按钮靠右：用
justify-content-between，文字容器加flex-grow-1 text-center（注意：text-center此时作用于已占满宽度的子容器，才真正居中） - 别给 Flex 父元素同时加
d-flex和text-center——后者会被忽略，还容易掩盖布局意图
如何让文字“随容器宽度变化而动态居中”
纯 text-center 是静态的：只要容器宽度变，文字始终在容器中间，但它不感知容器是否缩窄或拉伸；真要“自动适应”，得结合容器行为和布局约束。
常见需求其实是“文字块在窄屏时左对齐、宽屏时居中”，这本质是响应式对齐，不是动态计算。
- 用
text-start text-lg-center：小屏左对齐，≥992px 居中 - 如果容器本身有
max-width: 600px且居中显示（如mx-auto），那内部text-center就自然随容器动——关键不是文字自己“感知”，而是容器被居中了 - 避免用
style="text-align: center"写内联样式，它会切断断点类的层叠，导致响应式失效
Modal 或卡片内文字居中失败的隐藏原因
比如在 .card-header 或 .modal-title 上加了 text-center 却没效果，大概率是因为父级或组件内部已隐含 d-flex 布局（Bootstrap 5 的某些变体默认启用），导致文本对齐类失去作用域。
检查 DOM 结构比猜 CSS 更快：打开开发者工具，看目标元素是否被包在带 d-flex 的 wrapper 里。
- 确认后，直接删掉干扰的
d-flex，或改用justify-content-center控制整个 header 的内容分布 - 若 header 含图标+文字+按钮混合，
justify-content-center会让全部内容居中；只想文字居中、按钮靠右，就得用justify-content-between+ms-auto给按钮 - 别在
.card-header上同时加text-center和justify-content-center——语义冲突，CSS 层叠结果不可控
实际中最容易被忽略的，不是“怎么写对齐类”，而是没意识到 text-center 在 Flex 场景下根本不起作用，还反复调试字体颜色或 margin。先看父容器 display 类型，再决定用 text- 还是 justify-content-，能省掉 80% 的排查时间。
