Bootstrap 5 中 .card-header 文字对齐应优先使用内置文本工具类：居中用 text-center，右对齐用 text-end；若存在 d-flex 布局干扰，需改用 justify-content-center 等 flex 类或调整内部元素对齐。
卡片头部文字默认左对齐，怎么改成居中或右对齐
bootstrap 5 的 .card-header 默认使用 text-start（等价于 text-align: left），所以文字天然左对齐。改对齐方式不靠重写 css，直接用内置的文本工具类最稳妥。
- 居中：给
.card-header元素加text-center类 - 右对齐：加
text-end类 - 响应式对齐（比如小屏左、大屏居中）：组合使用
text-sm-center、text-md-end等断点类
注意：别用 style="text-align: center" 写内联样式——它会覆盖 Bootstrap 的响应式文本类，导致断点失效。
为什么加了 text-center 没生效
常见原因是父容器或卡片本身有 flex 布局干扰。Bootstrap 5 的 .card-header 在某些变体（比如带按钮或图标时）可能被包在 .d-flex 容器里，此时文本对齐类作用于 flex 子项，但 flex 默认会拉伸并忽略 text-align。
- 检查是否意外用了
d-flex或justify-content-*类在.card-header上 - 如果
.card-header是 flex 容器，text-center对其子元素无效；此时应给内部文字容器（如<h5></h5>）单独加对齐类 - 避免嵌套多层
text-*类，它们不会叠加生效，后写的会覆盖前写的
示例错误写法：<div class="card-header d-flex"><h5 class="text-center">标题</h5></div> —— 这里 h5 是 flex 项，text-center 不起作用；正确做法是去掉 d-flex，或改用 justify-content-center 控制整个 header 的内容分布。
text-center 和 justify-content-center 选哪个
本质区别在于作用对象不同：text-center 控制行内内容的水平对齐（适用于段落、标题等块级但非 flex 的场景）；justify-content-center 是 flex 布局属性，控制 flex 容器内子项的整体分布。
- 纯文字标题，无按钮/图标/额外元素 → 优先用
text-center - 标题 + 右侧操作按钮（如
<button class="btn btn-sm ms-auto">编辑</button>）→ 必须用d-flex justify-content-between或justify-content-center，此时text-center无效 - 混排场景下，
justify-content-center会让整个 header 内容居中，包括按钮；若只要文字居中、按钮保持右侧，得用ms-auto配合text-start或手动 margin
性能上没差异，但语义更清晰：用对齐类处理“文字对齐”，用 flex 类处理“布局分布”，混用容易失控。
自定义字体大小或行高时对齐偏移怎么办
当修改 font-size 或 line-height 后，文字视觉上看起来没居中，其实是 line-height 和 padding 的组合效果被打破。Bootstrap 卡片头部默认有 padding: 0.75rem 1.25rem，而文字垂直居中依赖行高与 padding 的配合。
- 不要只调
font-size，同步微调line-height（推荐设为无单位值，如1.2） - 若必须改 padding，优先用 Bootstrap 的间距工具类（如
py-3），避免直接写padding-top单边值 - 极端定制需求（比如图标+文字+超小字号）建议用
align-items-center d-flex替代纯文本流，用 flex 垂直居中更可靠
最容易被忽略的是：很多开发者以为对齐只是 class 切换问题，其实一旦涉及尺寸、间距、flex、行高等多个维度，就得统一考虑渲染盒模型——这时候看一眼浏览器开发者工具里的 computed styles，比猜快得多。
