vertical-align 对 inline-block 无效是因它只控制元素基线与同行其他元素基线的对齐关系，而非相对父容器定位；middle 是使元素中点对齐 baseline 上方 0.5ex 处，并非真正居中。
为什么 vertical-align 对 inline-block 元素没反应？
因为 vertical-align 本身只对「行内级元素」（包括 inline、inline-block、inline-table）生效，但它不是控制元素自身相对于父容器的垂直位置，而是控制该元素**基线（baseline）与同一行内其他元素基线的对齐关系**。如果父容器只有一行且只有一个 inline-block，它默认对齐的是父行框的 baseline（大致在文本底部），看起来就像“没对齐”。
vertical-align: middle 为什么常不居中？
因为 middle 是让元素的**垂直中点对齐父行框 baseline 上方 0.5ex 的位置**（ex 是当前字体 x-height），不是相对于整个父容器居中。所以它受行高、字体、前后是否有文本等影响极大。
- 父容器有文字时，
inline-block会和文字对齐，文字高度不一致就偏移 - 父容器无内容但设置了
line-height，vertical-align: middle仍按该行高计算基准 - 多个
inline-block元素之间若vertical-align值不同，会互相拉扯基线位置
示例：父容器 line-height: 20px，子元素 height: 40px，用 vertical-align: middle 后，顶部仍可能留白——因为对齐点根本不在容器中心。
真正可靠的垂直对齐方案（仅限单行场景）
当目标是让一个或多个 inline-block 在**单行内相对父容器垂直居中**，最稳的方式是组合使用：
- 父容器设
line-height等于其高度（如height: 60px; line-height: 60px;） - 子元素设
vertical-align: middle，且**无换行、无上下外边距/内边距干扰** - 子元素最好设
font-size: 0（避免内部文字撑高行框）或确保内容本身不引入额外基线偏移
代码示意：
.parent {
height: 60px;
line-height: 60px;
font-size: 0; /* 消除空格/文本带来的行高干扰 */
}
.child {
display: inline-block;
vertical-align: middle;
font-size: 14px; /* 子元素恢复字体大小 */
}
更现代、更鲁棒的替代方案
如果父容器高度固定或流式，且你不需要严格保持 inline-block 流式布局语义，直接放弃 inline-block + vertical-align 更省心：
- 父容器用
display: flex，加align-items: center—— 支持任意子元素类型，无视基线 - 父容器用
display: grid，加align-items: center—— 同样可靠，兼容性略低于 Flex（但现代浏览器已无压力） - 若必须保留 inline-block 流式换行行为（比如多行图标列表），又需每行内垂直居中，那就只能回到第一种方案，并严格控制
line-height和font-size
关键点在于：CSS 中没有“让 inline-block 相对于父容器垂直居中”的原生属性；所有所谓“居中”都是借行框机制模拟的，一旦上下文稍复杂（比如行高变化、混排文字、响应式缩放），就容易失准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
