vertical-align仅对inline、inline-block、inline-table及table-cell元素生效，对block元素无效；它作用于行内格式化上下文中相邻元素的基线对齐，而非父容器内的绝对居中。
vertical-align 只对特定元素类型生效
vertical-align 的作用范围被 CSS 规范严格限定：它只对 display 值为 inline、inline-block、inline-table 或表格单元格（如 table-cell）的元素起作用。块级元素默认是 display: block，而 block 不在该属性的支持列表里——所以直接给一个 div 设置 vertical-align: middle 完全无效，浏览器会忽略该声明。
常见误用场景：给父容器设 vertical-align
很多人试图在父容器上写 vertical-align: middle，指望子块元素能随之居中。这是典型误解：vertical-align 不控制子元素在父容器内的定位，它只影响**行内格式化上下文（IFC）中相邻兄弟元素之间的基线对齐关系**。父容器如果是 block，它内部不构成 IFC（除非子元素全是行内级），此时 vertical-align 根本没有作用对象。
- 错误写法：
.parent { vertical-align: middle; }（父是 block，无效） - 正确前提：必须让目标元素变成
inline-block或嵌套在table-cell中 - 典型有效组合：
.cell { display: table-cell; vertical-align: middle; }
为什么 inline-block + vertical-align 能“看起来”居中？
当把块元素改成 display: inline-block 后，它就进入了行内上下文，vertical-align 才开始参与对其在行框（line box）内的垂直位置计算。但注意：它对齐的是**该行框的基线或指定参考线**，不是父容器的物理中心。实际效果取决于：
- 父容器是否设置了明确高度（否则行框高度由内容撑开）
- 同行是否存在其他行内元素（会影响基线位置）
- 是否清除默认的
font-size和line-height干扰（常导致底部留白）
所以它只是“模拟居中”，并非真正基于容器尺寸的居中，稳定性差，不适合复杂布局。
立即学习“前端免费学习笔记（深入）”；
替代方案更可靠
想让块元素在父容器中真正垂直居中，应避开 vertical-align，改用语义和行为更清晰的机制：
-
display: flex+align-items: center（推荐，现代浏览器全覆盖） -
display: grid+place-items: center（简洁，适合已用 Grid 的项目） - 绝对定位 +
top: 50%+transform: translateY(-50%)（兼容旧版 IE，但需父容器position: relative）
真正容易被忽略的是：vertical-align 的设计初衷从来就不是“容器内居中”，而是解决图文混排、表格单元格对齐这类行内对齐问题。拿它硬套块级布局，就像用螺丝刀拧钉子——不是不能动，但拧歪是大概率事件。
