line-height与height相等仍不居中，主因是盒模型干扰（如padding/border未计入内容区）、内联元素基线对齐偏差、字体度量不均或flex/grid等布局上下文使line-height失效；必须满足容器高度明确、纯单行、box-sizing:border-box、无vertical-align干扰、line-height等于内容区高度这五项硬条件。
line-height设成和height一样，文字还是偏上或偏下？
这不是数值没对齐，而是盒模型或布局上下文在干扰。常见原因有：box-sizing 默认是 content-box，padding 和 border 没被算进内容区；按钮里混了 svg 或 img，它们按 baseline 对齐，把整行“拉高”；父容器用了 display: flex 或 display: grid，此时 line-height 完全不生效；写了 vertical-align 在按钮或子元素上，和 line-height 冲突。
要让 line-height 真正起效，必须同时满足五点：height 明确（不能是 auto）；内容纯单行（加 white-space: nowrap）；box-sizing: border-box；清除所有 padding/border 干扰；line-height 值等于「内容区高度」，即 height - padding-top - padding-bottom - border-top-width - border-bottom-width。
按钮里带图标（SVG/IMG）+ 文字，怎么对齐？
line-height 在这种混合结构里基本不可靠。图标默认按 baseline 对齐，而文字基线位置受字体度量影响，不同字体 ascent/descent 差异大，尤其 icon font 或系统字体更明显。
直接改用 display: flex 是最稳的解法：align-items: center 不依赖字体、不care换行、也不吃 vertical-align 的亏。示例：
立即学习“前端免费学习笔记（深入）”；
.btn {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 0 16px;
box-sizing: border-box;
}如果必须保留 inline 结构（比如老项目），可对图标加 vertical-align: middle，再微调 line-height，但每次换字体或图标都得重测。
表格单元格（td/th）里文字不居中？
line-height 设在 tr 或 table 上无效——浏览器只认 td 和 th 上的值。常见错误是给 tr 加了 line-height: 40px，结果文字还是贴顶。
正确做法：line-height 必须写在 td/th 上；配合 vertical-align: middle；加上 border-collapse: collapse 避免边框叠加导致高度飘忽；别同时设 height 和 line-height，容易冲突——小字号时悬空，大字号时溢出。
含图片或多行文本时，height 几乎必然失效，建议用 min-height + padding 控制，或直接用 display: flex 重写单元格内部结构。
响应式按钮或动态字号下，line-height 总调不准？
用像素值（如 line-height: 24px）在 font-size 变化时会失控：根字号缩小时，行高卡死不变，文字挤在一起；放大后又可能重叠。推荐一律用无单位数值，比如 line-height: 1.6，它会随当前 font-size 动态计算。
但要注意：line-height: 100% 或 line-height: 1em 会继承父级字体大小，嵌套深时容易错乱；normal 浏览器默认值不可靠，不同字体下差异明显，务必显式设置。
如果用了 clamp() 或 CSS 变量控制字号（如 font-size: clamp(1rem, 2.5vw, 1.25rem)），line-height 很难同步缩放，这时 flex 是唯一省心方案。
最容易被忽略的是：Safari 9.1 以下或旧版 Android WebView 对中文 line-height 渲染差异更大，哪怕数值对齐也偏移。只要兼容性要求存在，就别碰 line-height 居中，直接上 flex。
