vertical-align仅对inline、inline-block、table-cell元素生效，本质是行内布局的基线对齐控制；对div等块级元素无效，垂直居中应使用flex或grid。
vertical-align 只对 inline、inline-block、table-cell 元素生效
很多人试了 vertical-align: middle 发现对 div 或 section 没反应，不是写错了，是它压根不作用于块级元素。这个属性本质是“行内布局中的基线对齐控制”，不是通用垂直居中方案。
常见错误现象：div 里放一张图和一段文字，想让文字垂直居中对齐图片，却给 div 加 vertical-align —— 没用，得加在图片或文字的 img / span 上（前提是它们是 inline 或 inline-block）。
- 典型可用场景：表格单元格（
td）、img与旁边文字对齐、input和label垂直对齐 -
vertical-align的值如top、middle、baseline、text-bottom都是相对于父行框（line box）的基准线计算的，不是相对于父容器高度 - 如果父容器没有形成行框（比如只有单个块级子元素），那
vertical-align就无从参考，直接失效
baseline 对齐最易踩坑：文字和图片默认不对齐
默认情况下，img 是 inline 元素，其 vertical-align 值为 baseline，但它对齐的是父行框的 baseline（大致在字母 x 底部），而文字的 baseline 也在此处——但图片底部会多出几像素空白（其实是 descent 空间），看起来就像图片“下沉”了。
这就是为什么常看到图片下方有白边，哪怕没设 margin/padding。
立即学习“前端免费学习笔记（深入）”；
- 快速修复：
img { vertical-align: top; }或vertical-align: middle;或vertical-align: text-bottom; - 更彻底的解法：
img { display: block; }，让它脱离行内流，此时vertical-align不再起作用，但空白也消失了 - 注意：
vertical-align: middle并不是让元素在父容器中间，而是让元素的中点对齐父行框中“字母x-height”的中点，和视觉居中常有偏差
flex 或 grid 才是真正的垂直居中主力
如果你目标是让一个块在父容器里上下居中，别硬套 vertical-align。它不是为这个设计的，强行用会绕进 line-height、font-size、匿名文本节点等一堆隐式依赖里。
现代布局该交给 display: flex 或 display: grid：
-
flex：父容器设display: flex; align-items: center;，子元素立刻垂直居中（无视类型） -
grid：父容器设display: grid; align-items: center;，效果一致 - 兼容性上，
flex在 IE10+ 支持良好；若需支持 IE9 及更早，才考虑 table-cell +vertical-align组合（但代价是语义失真）
table-cell + vertical-align 是唯一能跨浏览器撑满高度的 inline 方案
当必须用纯 CSS 实现“内容随容器高度拉伸并垂直居中”，且不能用 flex/grid（比如老项目兼容要求），display: table-cell 是少数可靠路径。
它把容器变成类似 td 的行为，这时 vertical-align 才真正按“单元格内容垂直对齐”来工作。
- 用法：
parent { display: table-cell; vertical-align: middle; height: 200px; }，子元素自动居中 - 缺点：无法设置
margin，padding行为也和普通块不同；父子关系语义混乱（不是真表格） - 性能影响小，但可维护性低——一旦后续要加 flex 布局或响应式，容易冲突
