line-height 能让单行文字垂直居中是因为它将行高均分为上间距、字体高度和下间距，单行时上下间距相等，文字自然居中；多行文本不适用此法，需用 flex 或绝对定位等替代方案。
line-height 为什么能让单行文字垂直居中
因为 line-height 定义的是「两行基线之间的距离」，浏览器会把这一高度均分为上间距 + 字体高度 + 下间距；当只有一行文本时，上下间距相等，文字自然落在行框正中间。这不是“对齐”，而是行框内部的默认排布逻辑——只要内容没换行、没溢出、没被其他布局干扰，它就稳稳居中。
height 和 line-height 必须相等吗
不是必须设两个值，但效果上得等效。常见误区是硬写 height: 40px; line-height: 40px;，其实如果父容器没有 padding/border，line-height: 40px 本身就会把行框撑到 40px 高，此时再写 height: 40px 属于冗余，还可能因盒模型冲突导致意外滚动或裁剪。
- 只设
line-height：适合内容区即容器全高，无内边距、无边框 - 设
height+line-height：仅当需要显式约束容器尺寸（比如配合 flex 子项或 transition）时才必要 - 若容器有
padding: 8px，真实内容区高 =height - 16px，那line-height就得设成这个差值，不是 height 值本身
为什么多行文本不能直接套用这个方法
多行时，line-height 控制的是「每行内部」的上下间距，不是整个块的高度。你设 line-height: 40px，只是让每行之间拉开 40px 距离，第一行顶部和最后一行底部依然紧贴容器边缘，整体不会居中。
- 想让多行文本在容器中垂直居中，得用
display: flex+align-items: center - 或者用
inline-block包裹内容再配line-height，但要处理字体大小为 0 消除间隙等副作用 -
绝对定位 +
transform: translateY(-50%)是兼容性更广的备选，但需已知容器高度
line-height 设成什么值最不容易翻车
用无单位数值，比如 line-height: 1.6。它按当前 font-size 动态计算真实像素值，缩放、rem 切换、子元素字号变化时都稳。而 line-height: 40px 或 line-height: 150% 在响应式场景下极易失控——根字号变小，行高却卡死，文字挤成一团；字号变大后又可能重叠。
- 中文正文建议从
line-height: 1.75起步，现代无衬线字体（如思源黑体）自带较大内置留白 - 别用
line-height: normal，不同字体下实际值差异极大，Chrome 和 Safari 对同一字体都可能给出不同默认值 -
line-height: 100%或1em会继承父级 font-size，嵌套深时容易错乱，不推荐
真正容易被忽略的点是：这个居中行为只在「纯文本、单行、无 padding/border、未启用 flex/grid」的原始块级上下文中成立。一旦加了 display: flex，line-height 就彻底失效——不是 bug，是 align-items 的优先级更高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
