vertical-align仅对行内级元素（inline/inline-block）和表格单元格（table-cell）有效，对块级元素（div等）、浮动或绝对定位元素无效；其对齐参照系是行框（line box）而非父容器，需配合line-height等属性正确使用。
vertical-align 为什么对 div/img/span 都没反应？
因为 vertical-align 根本不作用于块级元素（如 div、p、h1），也不作用于浮动或绝对定位的元素。它只对两类元素有效：行内级元素（display: inline 或 inline-block） 和 表格单元格（display: table-cell）。
- 给一个
div直接写vertical-align: middle→ 完全无效，浏览器直接忽略 - 给
img写vertical-align: middle→ 有效，但它是相对于**所在行框（line box）的基线**对齐，不是相对于父容器居中 - 给
span写vertical-align: top→ 有效，前提是它和兄弟元素同处一行（即未被换行或块化打断）
为什么加了 vertical-align:middle 还是“看起来没动”？
常见错觉：明明写了 vertical-align: middle，文字和图片却还是顶部贴齐。根本原因不是属性失效，而是你没控制好「对齐的参照系」——vertical-align 的行为高度依赖 line-height 和行内上下文。
- 父容器没设
line-height→ 行高由字体大小决定（通常很小），middle对齐点就非常靠上，视觉上几乎看不出变化 - 父容器是
div且子元素是纯inline（比如只有文字+img），那整个行框高度 = 最高行内元素内容区 + 行间距，vertical-align只在这个行框里微调位置 - 子元素用了
float或position: absolute→ 它已脱离行内流，vertical-align失去作用对象
真正能稳定垂直居中的三种靠谱方案
别再硬刚 vertical-align 做容器级居中。它本就不是为这个设计的。按场景选：
-
单行图文混排（如图标+文字按钮）：父容器设
line-height: 40px，img设vertical-align: middle，文字自动居中（前提是字号 ≤ 行高） -
需要父容器内任意内容垂直居中：改用
display: table-cell+vertical-align: middle，但必须确保父容器有display: table，且高度明确（如height: 100px） -
现代项目首选：父容器用
display: flex+align-items: center，无视行高、显示类型、是否换行，一劳永逸
.container {
display: flex;
align-items: center;
height: 80px;
}
.container img {
margin-right: 8px;
}
容易被忽略的兼容性与调试细节
即使写对了，也可能在某些场景下“突然失效”，往往卡在这些细节上：
立即学习“前端免费学习笔记（深入）”；
-
vertical-align的值（如middle）是相对于x-height计算的，不是像素居中；所以字体不同，效果会偏移 - 父容器若用了
font-size: 0来清除 inline 元素间隙，会导致line-height失效，进而让vertical-align失去参照 - 某些旧版 Safari 对
inline-block元素的vertical-align解析不稳定，建议加vertical-align: top显式兜底 - 调试时打开浏览器开发者工具，看 computed 样式里
vertical-align是否显示为灰色（表示未生效），再往上查display和position值
vertical-align，不是记住“怎么让它居中”，而是清楚它从来就不是容器居中工具——它是行内排版的微调开关。用错地方，再调参数也没用。 
