vertical-align 不能单独让块级元素垂直居中，仅对行内级元素和表格单元格生效；其生效需父容器为 table-cell 或处于行盒环境，且子元素须为 inline/inline-block。
vertical-align 本身不能单独让块级元素在父容器中垂直居中——它只对行内级元素（inline、inline-block）和表格单元格（table-cell）生效，且作用范围是“当前行盒”或“单元格内容”，不是整个父容器。
为什么 vertical-align: middle 常常失效
直接给 div 或 img 写 vertical-align: middle 几乎总无效，因为：
- 默认
display: block的元素不参与行盒布局，vertical-align被忽略 - 即使给
img加了vertical-align: middle，它也只是相对于同一行的其他行内元素（比如文字）基线对齐，不是相对于父容器居中 - 没有显式设置父容器为
display: table-cell或启用行内上下文时，“middle”无参考基准
vertical-align 真正能用的两个场景
它只在两种明确上下文中可靠工作：
-
表格单元格内：给
<td>或<th>直接设vertical-align: middle，子元素（文本、图片、span）自动垂直居中 -
父容器设为
display: table-cell：此时vertical-align才获得“单元格内容对齐”的语义.parent { display: table-cell; width: 300px; height: 200px; vertical-align: middle; text-align: center; /* 水平也一起搞定 */ } .child { display: inline-block; /* 必须是行内级，否则 vertical-align 不起作用 */ }
容易被忽略的兼容性和副作用
用 table-cell + vertical-align 方案时：
立即学习“前端免费学习笔记（深入）”；
-
vertical-align有继承性——如果父容器设了，它的所有后代行内元素都会受影响，可能意外改变文字对齐 - IE8+ 支持，但现代项目中已基本淘汰；若需支持 IE9–，该方案比 flex 更稳妥，但代价是语义失真（用表格语义做布局）
- 无法配合
flex或grid父容器使用——display: table-cell和它们互斥 - 高度必须显式设定（
height或min-height），否则单元格高度塌陷，vertical-align失去作用基准
真正需要“父容器内垂直居中”，vertical-align 不是起点，而是配套工具：它只解决“单元格里怎么摆”，不解决“怎么造一个单元格”。别把它当通用居中开关。
