vertical-align 仅对行内元素和表格单元格生效；它基于行框基线而非父容器进行对齐，middle 不等于父容器垂直居中，适用场景限于图文对齐、表格内容对齐等行内流式排版。
vertical-align 只对行内元素和表格单元格生效
很多人以为 vertical-align 能让任意元素上下居中，结果给 div 加了 vertical-align: middle 却毫无反应——因为它根本不起作用。这个属性只影响两类元素：行内级（span、img、input 等）和 table-cell（即 display: table-cell 的元素）。
常见错误现象：
– 给 block 元素设 vertical-align，控制台无报错但样式无效
– 在 Flex 或 Grid 容器里给子项加 vertical-align，完全被忽略
- 真正起效的场景：图文混排时对齐文字和图标、表格中单元格内容对齐、用
inline-block模拟多列布局时调垂直位置 -
vertical-align的值（如top、middle、baseline）参考的是「行框（line box）」的基线或边界，不是父容器，这点极易误解 - 性能上没开销，但滥用会增加调试成本——尤其当父容器是
font-size: 0或有不透明line-height时，baseline行为会变得极难预测
baseline 对齐最常引发“莫名偏移”
默认值就是 baseline，但它不是“文字底部”，而是字母 x 的下沿（descender line），且会受父元素 font-size 和 line-height 影响。一张图片和一段文字并排时，图片底边往往比文字底边高一截，就是因为图片按 baseline 对齐，而文字的 baseline 下方还留着 descender 空间。
示例：<span>文字</span><img src="icon.png" style="max-width:90%" alt="CSS垂直对齐Vertical-align详解_行内元素的对齐困惑" > —— 图片会悬浮在文字下方一点
立即学习“前端免费学习笔记（深入）”；
- 解决方法之一：给
img加vertical-align: bottom或middle，立刻对齐 - 更稳妥的做法：统一设
vertical-align: top或vertical-align: middle，避免依赖不可控的字体度量 - 注意：如果父容器
line-height很大，vertical-align: middle会以整行高度中心为基准，不是以文字本身为中心
vertical-align: middle 不等于“居中于父容器”
vertical-align: middle 是把元素的**中点**对齐到父行框中「baseline + x-height/2」的位置，不是父容器高度的一半。所以它和你直觉里的“垂直居中”差得很远。
常见误用：
– 用 inline-block 做按钮组，想靠 vertical-align: middle 让所有按钮在容器里垂直居中 → 实际只是它们彼此对齐，跟容器无关
– 在 line-height: 40px 的容器里放 font-size: 14px 文字，设 vertical-align: middle，发现文字还是偏上
- 真正让单行文本在行高中居中：直接设
line-height等于容器高度，无需vertical-align - 要让一个
inline-block盒子相对父块级容器垂直居中？得配合line-height或用table-cell+vertical-align，或者干脆换 Flex - 兼容性方面：所有现代浏览器都支持，但 IE6/7 对
vertical-align在inline-block上的支持有 bug，慎用
替代方案比硬啃 vertical-align 更实际
如果你的目标是“让某个元素在父容器里垂直居中”，vertical-align 几乎从来不是最优解。它设计初衷是解决行内流式排版中的微调，不是容器级布局。
- 单行文本：用
line-height匹配容器高度，简单可靠 - 已知宽高的块：
position: absolute+top: 50%+transform: translateY(-50%) - 现代布局：优先用
display: flex+align-items: center，语义清晰、行为确定 - 表格场景：保留
display: table-cell+vertical-align，这是它最本分的用法
真正容易被忽略的点是：vertical-align 的效果高度依赖上下文——同一段代码，在不同 font-size、line-height、甚至不同字体下，渲染结果可能完全不同。调的时候别只看一个例子，多换几组文本试试。
