text-align: center 可使行内或行内块元素（如文字、img、span）在父容器中水平居中，但对块级子元素无效；单行文本垂直居中可用 line-height 等于容器高度实现，二者组合可完成完全居中，前提是容器有明确高度且内容为单行。
行内元素水平居中只靠 text-align: center
想让文字、<img>、<span> 这类行内或行内块元素在父容器里水平居中，直接给父元素加 text-align: center 就行。它不作用于父元素自身，而是控制它的“行内内容”怎么排——这是关键前提。
常见错误现象：div 本身设了 text-align: center 却没效果，大概率是因为子元素是另一个 div（块级），它不受影响；或者子元素写了 float / position: absolute，脱离了文本流。
要点：
-
text-align对块级子元素无效，但对<img>有效（因为img默认是inline-block） - 如果子元素是块级，想让它响应
text-align，得先加display: inline-block -
vertical-align在这里不起垂直居中作用，它只调节行内元素在当前行内的基线对齐位置
单行文本垂直居中靠 line-height 等于容器高度
当容器高度固定，且里面只有单行文本（或一个 inline-block 元素），用 line-height 匹配容器高度是最轻量的垂直居中方式。
立即学习“前端免费学习笔记（深入）”；
例如：.box { height: 60px; line-height: 60px; }，里面一段文字就会垂直居中。
注意点：
-
line-height值必须是明确数字（如60px、1.5），不能是normal或未设置——否则浏览器按默认行高渲染，无法居中 - 只适用于单行；多行文本会把行距拉得过大，内容反而溢出或错位
- 如果容器用了
font-size: 0（比如为了消除inline-block间隙），记得重设子元素字体大小，否则文字看不见
line-height 和 text-align 组合实现完全居中
两者配合能一次性搞定单行文本/图片的水平 + 垂直居中，无需 Flex 或定位，适合简单卡片、按钮内图标文字等场景。
典型写法：
.centered {
width: 200px;
height: 80px;
text-align: center;
line-height: 80px;
font-size: 16px;
}
这个组合生效的前提很具体：
- 容器必须有明确
height，不能是min-height或由内容撑开 - 内容必须是单行，且不能换行（必要时加
white-space: nowrap） - 如果里面混了块级元素（比如
<div>），它会破坏行高计算，导致错位
为什么 line-height 居中容易失效
不是 line-height 不好用，而是它依赖严格的上下文。最容易被忽略的三点：
- 父容器没有设定高度，或高度被
flex/grid的自动行为覆盖，line-height就失去参照 - 子元素设置了
vertical-align: top/bottom，会覆盖行高带来的基线居中效果 - 字体实际渲染高度 ≠ 字体大小，尤其在使用 icon font 或 emoji 时，
line-height可能偏高或偏低，需要微调
真要兼容多行、动态内容或复杂嵌套，别硬扛 line-height，直接上 display: flex 更稳——但前提是，你得记得给父容器设个高度，不然 align-items: center 也没法垂直居中。
