line-height等于容器height可实现单行文本垂直居中，前提是容器高度固定、内容严格单行（需white-space:nowrap）、无padding/border干扰、非flex/grid布局且字体一致；否则易失效。
单行文字垂直居中，用 line-height 配合固定高度容器最直接有效，但必须确保内容只有一行、容器高度明确、且不混用其他影响行高的 CSS。
为什么 line-height 能让单行文字垂直居中
浏览器把一行文字看作一个“文本行”，line-height 决定了这一行的总高度（含上下留白）。当它和父容器的 height 相等时，文字在视觉上就被“撑”到了容器正中间——本质上是靠行内框居中，不是真正意义上的布局居中。
常见错误现象：文字看起来偏上或被截断；换行后完全失效；响应式缩放时错位。
-
line-height是数值或无单位值（如1.5），不是像素值本身；写成line-height: 40px才能精确匹配height: 40px - 如果父元素设了
font-size变化（比如用 rem 或媒体查询），line-height的实际像素值也会变，需同步检查 - 子元素如果是
<p></p>或带默认margin的标签，要先重置margin: 0，否则会破坏高度对齐
text-align: center 和 line-height 组合怎么写才不出错
这是最轻量的水平+垂直居中方案，但只适用于纯文本、按钮文字、标题等明确单行场景。不能用于包含图片、图标或可能换行的段落。
正确写法示例：
div {
height: 60px;
line-height: 60px;
text-align: center;
font-size: 16px;
}
-
text-align: center必须作用于文字的**直接父容器**，不是更外层的 wrapper - 容器必须是块级元素（默认就是），且不能有
display: inline或display: flex等覆盖行为 - 避免同时设置
padding：比如padding: 10px会让实际内容区高度变成60px - 20px = 40px，但line-height还是按 60px 算，结果文字就偏下了
哪些情况会让 line-height 垂直居中失效
一旦脱离“单行 + 固定高”前提，这个方法立刻不可靠。尤其注意以下三类典型陷阱：
- 文字内容动态变化（比如用户输入、API 返回多行文本），
line-height无法自适应 - 容器用了
min-height而非height：当内容撑高时，line-height不再等于实际高度，文字贴顶 - 父元素或祖先元素设置了
font-size继承链，导致子元素实际字号变化，进而影响line-height计算（例如 root 设了font-size: 62.5%，子元素又没重设）
遇到这些情况，别硬调 line-height，直接切到 display: flex 或 position: absolute + transform 更省事。
表格单元格里还能用 line-height 吗
可以，但风险更高。因为 <td> 默认是 <code>display: table-cell，而 vertical-align: middle 和 line-height 在这里会相互干扰。
- 如果只设
line-height，且单元格没设height或min-height，它会随内容撑开，居中无效 - 如果同时写了
vertical-align: middle和line-height，后者优先级更高，可能把文字压到顶部或底部 - 更稳妥的做法是：给
<td> 加 <code>min-height: 40px，然后只用vertical-align: middle，彻底放弃line-height控制真正容易被忽略的是：现代浏览器已完全无视 HTML 的
valign属性，哪怕你写了<td valign="middle">，也毫无作用。</td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
