line-height 仅控制行框高度，不直接决定元素垂直对齐；需配合 vertical-align（inline 元素）或 flex/grid（块级内容）实现精准居中。
行高（line-height）设了却还是不对齐？问题往往不在 line-height 本身，而在于它只控制行内内容的行框高度，不直接决定元素自身的垂直对齐方式。尤其当父容器有 padding、border、font-size 不一致，或子元素是 inline 元素（如 span、img）时，视觉错位很常见。
确认元素是否为 inline 或 inline-block
line-height 对块级元素（如 div、p）只影响其内部文本行间距，不影响整个盒子在父容器中的位置；但对 inline 元素（如 span、a、img），它会参与 行框（line box）的构建，进而影响基线对齐。
- 给 inline 元素加 vertical-align: middle / top / bottom 才能真正调整它在行框内的垂直位置
- 图片默认按基线（baseline）对齐，常导致下方留白——加 vertical-align: middle 或 display: block 即可解决
- 若想让多个 inline 元素在一行中居中对齐，需统一设置 vertical-align，并确保父容器 line-height 合理（如与 height 一致）
检查父容器的 height 和 line-height 是否冲突
当父容器设了固定 height，又单独设 line-height，可能造成内容溢出或“悬浮”——因为 line-height 只撑开行高，不强制盒子高度；而 height 是硬性约束。
- 若希望单行文本在固定高容器中垂直居中：推荐用 height = line-height（仅限单行）
- 多行文本请改用 flex 布局：display: flex; align-items: center;
- 避免同时设置 height 和过大的 line-height，否则可能触发滚动或裁剪
留意字体度量（font metrics）带来的视觉偏差
不同字体的 ascent、descent、x-height 差异很大。即使 line-height 相同，实际文字“看起来”的位置也可能偏上或偏下。
立即学习“前端免费学习笔记（深入）”；
- 用 font-family 统一字体族，减少跨字体渲染差异
- 调试时可在 Chrome DevTools 中勾选 “Show layout shifts” 或用 outline: 1px solid red 查看真实行框范围
- 对精度要求高的场景（如图标+文字按钮），建议用 flex 或 grid 替代纯 line-height 布局
替代方案：优先用现代布局方式
line-height 是为文本排版设计的，不是垂直居中工具。复杂对齐建议绕过它：
- 单行文本居中：height + line-height 匹配（简单有效）
- 多行/任意内容居中：flex（display: flex; align-items: center;）
- 绝对定位居中：top: 50%; transform: translateY(-50%)
- grid 居中：display: grid; place-items: center;
基本上就这些。line-height 不是万能对齐开关，理解它作用的边界，再搭配 vertical-align 或现代布局，就能稳稳控住垂直节奏。
