vertical-align仅作用于inline、inline-block和table-cell元素；对block、flex、grid等无效；其“middle”指元素中点对齐父元素x-height中点，非容器几何中心。
vertical-align 只作用于 inline-level 和 table-cell 元素
vertical-align 的设计目标从来就不是对齐块级容器，它只在行内格式化上下文（inline formatting context）或表格单元格中起效。当你给一个默认 display: block 的 div 设置 vertical-align: middle，浏览器直接忽略——这不是 bug，是规范行为。
它真正生效的元素类型只有三类：inline（如 span、a）、inline-block（需显式设置）、table-cell（含 td、th 或 display: table-cell）。其他任何 display 值，比如 flex、grid、block、list-item，都会让 vertical-align 彻底失效。
为什么 inline-block 有时也“没反应”
常见错觉：设了 display: inline-block 还是没对齐。问题往往出在父容器的行高或内容结构上：
- 父元素没有明确的
line-height，导致行盒（line box）高度不可控，vertical-align缺少参照基准 - 元素间存在空白字符（换行、空格），被渲染为匿名 inline box，影响 baseline 位置
- 子元素本身有 margin、padding 或 border，干扰视觉对齐判断
- 父元素用了
float或position: absolute，强制改变 display 计算值，间接使vertical-align失效
图片和文字对齐时 vertical-align: middle 为什么看起来偏高或偏低
vertical-align: middle 并不是让元素中心与父容器中心对齐，而是让元素的中点对齐到父元素基线（baseline）向上半个 x-height 的位置。这个“middle”是基于字体度量的，不是几何居中。
实际效果受以下因素影响：
- 父元素的
font-size和line-height：line-height越大，行盒越高，middle的参照点越往上漂 - 图片自身尺寸：大图用
middle易显低，小图标反而更准 - 字体图标（如 Font Awesome）：其视觉中心常低于字体 baseline，推荐用
vertical-align: -0.125em替代middle - 需要像素级控制时，直接用长度值更可靠，比如
vertical-align: -2px
想让块级元素垂直居中？别硬套 vertical-align
如果目标是让整个 div 在父容器里垂直居中，vertical-align 不是解决方案。它根本不适用于这个场景。
可行路径只有三条：
- 用
display: table-cell+vertical-align: middle：父容器加display: table，子容器加display: table-cell—— 兼容性好但语义失真 - 用
line-height匹配父容器高度：仅限单行纯文本，且父容器必须固定高度 - 现代方案：改用
display: flex（align-items: center）或display: grid（place-items: center）—— 简洁、可控、无副作用
最易被忽略的一点：即使你把块级元素改成 inline-block，它的垂直对齐仍是相对于所在行盒，而不是整个父容器。想靠它实现“容器级居中”，本质是误读了 CSS 渲染模型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
