vertical-align:middle不是让元素相对父容器垂直居中，而是使元素中点对齐当前行框的“基线+x-height/2”位置；它仅对inline、inline-block、table-cell生效，需line-height提供足够行高，且受兄弟元素及空白节点影响。
vertical-align 不是用来让元素“相对于父容器垂直居中”的，它只控制行内级元素在当前行框（line box）内的基线对齐位置。加了没反应、看起来没变化、不同浏览器表现不一致——大概率不是写错了，而是用错了场景。
为什么给 span 或 img 加 vertical-align: middle 没效果
常见现象：父容器是 div，里面放几个 span，全加了 vertical-align: middle，但元素位置完全不动。
- 父容器没有形成明确的行框：
div默认是display: block，内部若无其他行内内容或未设置line-height，浏览器不会生成稳定的行框，vertical-align就失去作用基准 - 元素本身不是行内级：给
div或p直接加vertical-align无效，它只对display: inline、inline-block、table-cell生效 - 兄弟元素干扰：同一行里一个
img设top，一个span设middle，整行高度由最高者决定，另一个会被“吊”高，视觉上像没动
img 底部空白怎么用 vertical-align 消掉
图片默认是 inline 元素，会和文字共享基线，导致底部多出约 4px 空隙——这不是 margin 或 padding，是基线对齐产生的自然空隙。
- 最直接：加
vertical-align: bottom或vertical-align: top，彻底脱离基线逻辑 - 更彻底：改
img { display: block; }，退出行内上下文，空白自然消失 - 折中方案：用
vertical-align: middle，但必须确保父容器有统一font-size和line-height，否则字号一变，偏移量就漂移
什么时候 vertical-align: middle 才真能“垂直居中”
只有在 display: table-cell 元素上，vertical-align 的 middle 才是字面意义的“内容在容器内垂直居中”。这是少数无需额外 wrapper 就能稳定实现垂直居中的原生 CSS 方案。
立即学习“前端免费学习笔记（深入）”；
-
td、th或显式设display: table-cell的元素才支持该语义 - 此时不依赖
line-height，也不受兄弟元素影响，行为可预测 - 仅支持
top/middle/bottom，不支持text-top、sub等行内专用值
真正想让子元素相对父容器垂直居中，该用什么
如果目标是“让图标+文字在固定高的 div 里垂直居中”，别硬扛 vertical-align，它不是为这事设计的。
- 首选
display: flex; align-items: center;：父容器设这两条，子元素自动居中，不依赖字体、行高、基线 - 次选
display: grid; align-items: center;：同样简洁，兼容性略晚于 flex，但现代项目基本无忧 - 慎用绝对定位 +
transform: translateY(-50%)：需父容器position: relative，且对动态高度支持差
最容易被忽略的是：vertical-align 的生效前提非常具体——它不像 margin 那样“写了就动”，而是一整套行框计算的结果。调试时得同时看父容器的 line-height、font-size、所有兄弟元素的 display 和 vertical-align 值，缺一不可。
