副标题是块级元素时text-align:center无效，因该属性须作用于其父容器而非副标题自身；它仅影响父容器内行内内容对齐，块级副标题需通过父容器text-align:center、Flex的justify-content:center或margin:0 auto（需显式宽度）实现居中。
副标题是块级元素时用 text-align: center 无效？
很多人给副标题（比如 <h3> 或 <p class="subtitle">）加 text-align: center 没反应，是因为写错了位置：这个样式必须加在**副标题的父容器**上，而不是副标题自己。副标题本身是块级元素，默认独占一行，text-align 对它不起作用——它只影响内部的文本、图片等行内内容对齐。
常见错误：
- 给 <h3 class="subtitle">副标题</h3> 自己设 text-align: center
- 父容器没设宽度或用了 display: flex 却还指望 text-align 生效
- 正确做法：找到卡片内容区的包裹容器（如
<div class="card-body">），在其 CSS 中加text-align: center - 如果父容器是 Flex 容器（
display: flex），text-align会被忽略，此时得用justify-content: center - 若副标题是
inline-block或加了display: inline，那它就变成行内级，这时给它自己设text-align: center也没用——仍得作用于它的父容器
卡片用 Flex 布局时，副标题居中要配 justify-content 而不是 margin: auto
现代卡片组件普遍用 Flex 做整体结构（比如 <div class="card"> 设 display: flex; flex-direction: column），这时副标题作为子元素，margin: 0 auto 可能失效——因为 Flex 子项的 margin 行为受容器 justify-content 控制，不是传统文档流。
- 如果卡片主体区域是 Flex 容器，且副标题是直接子元素，优先用
justify-content: center控制水平居中 -
margin: 0 auto在 Flex 容器里仍可工作，但前提是副标题没被设成flex: 1或其他拉伸属性，否则它会撑满可用空间，auto失效 - 避免混用：不要同时设
justify-content: center和margin: 0 auto，后者会被前者覆盖
响应式卡片里副标题居中容易漏掉的断点处理
当卡片宽度随屏幕缩小（比如从 max-width: 400px 缩到 100%），副标题文字可能换行，这时单纯靠 text-align: center 仍能居中每行，但若父容器高度固定、内容溢出，就会裁剪或错位。
- 检查副标题是否设置了
white-space: nowrap—— 这会导致长文本不换行、溢出容器，看起来像“没居中” - 移动端建议加
word-break: break-word或overflow-wrap: break-word，确保多行时每行都居中 - 如果卡片用了
line-height控制垂直间距，注意它会影响多行副标题的行高一致性，text-align: center不管垂直方向，别误以为是居中问题
用 margin: 0 auto 居中副标题时为什么经常不生效？
这是最常踩的坑：给副标题自己加 margin: 0 auto，却忘了它必须满足两个硬性条件——块级 + 显式宽度。
立即学习“前端免费学习笔记（深入）”；
- 副标题默认是块级（
<h3>、<p>都是），但若被重置了display（比如设成inline或flex），就得先还原或改用其他方案 - 必须显式设置
width或max-width；靠fit-content或inline-block也能触发，但兼容性略差（IE 不支持fit-content） - 父容器不能是
display: flex或display: grid，否则margin: auto的行为会改变（Flex 中它可用来对齐，Grid 中它可能被place-items覆盖）
复杂点往往不在“怎么写”，而在于你没意识到副标题所处的布局上下文已经接管了居中逻辑——Flex、Grid、绝对定位都会让传统 margin 或 text-align 失效。先看父容器用了什么布局，再选匹配的居中方式，比反复试 CSS 更省时间。
