vertical-align 仅对 inline、inline-block、inline-table 和 table-cell 元素生效，其本质是调整行内上下文中的基线对齐关系，而非使元素在父容器中垂直居中。
vertical-align 只对 inline 和 table-cell 元素生效
很多人以为 vertical-align 能控制任意元素的垂直对齐，结果给 div 或 block 元素加了 vertical-align: middle 却毫无反应——这是最常见误解。它本质上不是“让元素在父容器里垂直居中”，而是调整**行内上下文中的基线对齐关系**。
生效前提必须满足其一：
- 元素是
display: inline、inline-block、inline-table - 元素是
display: table-cell（此时行为类似td的单元格对齐） - 父容器是
display: table-row且子元素为table-cell
给 div 直接设 vertical-align 无效，不是 bug，是规范定义如此。
inline-block 元素间的空白符会干扰 vertical-align 对齐
当用 display: inline-block + vertical-align: middle 做图标+文字对齐时，常出现“看起来没对齐”的问题。根源是 HTML 中换行/空格被渲染为一个空白字符（U+0020），它有字体高度、有 baseline，会参与行盒（line box）布局。
立即学习“前端免费学习笔记（深入）”；
解决方式（任选其一）：
- 移除 HTML 中
inline-block元素间的换行和空格（写成<span></span><span></span>连写） - 父容器设
font-size: 0，子元素再单独设字体大小（注意继承影响） - 用
float: left或flex替代，避开行内布局复杂性
不处理空白符时，即使写了 vertical-align: middle，实际对齐基准仍是那个看不见的空白字符的 baseline。
vertical-align: middle 不等于“居中于父容器高度”
vertical-align: middle 的语义是：将元素的**中点**与父行盒中**小写字母 x 的中点（x-height）加上基线的一半**对齐。它依赖父级行高（line-height）和字体度量，并非相对于父容器 height 计算。
典型表现：
- 父容器
line-height很小，vertical-align: middle看起来“偏上” - 父容器无显式
line-height，取默认值（通常约 1.2），导致对齐位置浮动 - 子元素含不同字号或字体，baseline 天然不一致，
vertical-align效果更难预测
若目标是“绝对垂直居中”，应优先考虑 flex（align-items: center）或 grid（align-items: center），而非强行用 vertical-align 模拟。
table-cell 场景下 vertical-align 生效但受 line-height 影响
在 display: table-cell 元素上用 vertical-align 是可靠用法，但它仍受 line-height 干扰：如果单元格内容是纯文本，line-height 会撑开单元格内部的行盒，进而影响 vertical-align 的参考位置。
稳妥做法：
- 显式设置
line-height: 1或与单元格高度匹配的值 - 确保单元格高度由
height或min-height固定，避免内容撑高 - 避免在
table-cell内嵌套多层inline元素，否则 baseline 链变长，对齐偏差放大
真正需要兼容老浏览器（如 IE8）且必须用表格布局时，这个组合才值得深究；否则现代项目直接用 flex 更可控。
