vertical-align:middle未使图片居中，因其对齐的是行内框的“基线+x-height/2”而非父容器视觉中心，且需line-height提供足够行高、兄弟元素参与基线计算，并仅对inline/inline-block等特定display生效。
vertical-align:middle 为什么没让图片居中？先看它对齐的是谁
vertical-align:middle 不是对父容器“视觉中心”对齐，而是让元素的中点对齐父元素当前行内框（line box）的“基线 + x-height/2”位置。这个位置受兄弟行内元素、文本内容、空白符甚至隐藏的幽灵节点影响。如果父容器里只有 <img> 一个行内元素，它没有参照基线，vertical-align 就像按了静音键——没反应。
常见错误现象：<img src="a.jpg"> 单独放在 <div> 里，加了 <code>vertical-align:middle 和 display:inline-block，图片依然贴顶或偏下。
- 检查父元素是否设置了
line-height：没设时，行高由字体决定，往往太小，导致行内框高度不足，无法提供垂直对齐空间 - 检查是否有隐藏空白节点：换行、空格、制表符都会生成不可见的文本节点，改变基线位置
- 检查兄弟元素是否存在：哪怕是一个空
<span></span>，只要 display 是 inline 或 inline-block，就参与基线计算
line-height 是 vertical-align 起效的必要前提
没有足够高的行内框，vertical-align 就是无水之舟。图片本身高 40px，但父元素 line-height:1.2（对应约 20px），那行内框高度就只有 20px —— 图片根本塞不进去，更谈不上居中。
实操建议：
- 给父容器显式设置
line-height，值要 ≥ 子元素最大高度，例如line-height: 60px - 若父容器需自适应高度，用
line-height: normal不可靠，改用line-height: 1.5或具体像素值 - 避免在父容器上同时设
height和line-height冲突：比如height: 40px; line-height: 60px会撑开行框，但可能溢出
inline-block 元素的 vertical-align 失效，大概率是 display 类型或上下文错了
vertical-align 只对 display: inline、inline-block、table-cell、inline-table 生效。对 block、flex、grid 容器内的子项完全无效——哪怕你写在子元素上，浏览器也直接忽略。
容易踩的坑：
- 把
vertical-align:middle写在display:block的父<div> 上：毫无作用 <li>在 <code>display:flex容器里还试图用vertical-align居中子项：该用align-items:center - 误以为
display:inline-block自带垂直居中能力：它只是让vertical-align“有机会生效”，不是“自动居中” - 单行图文：用
display: flex; align-items: center父容器，简单干净 - 兼容老 IE（≤8）：用
display: table-cell; vertical-align: middle，但注意 table-cell 不支持 margin - 绝对定位图标/按钮：
position: absolute; top: 50%; transform: translateY(-50%)，适用于已知宽高的场景
替代方案比硬调 vertical-align 更稳：什么时候该放弃它
当你要居中的不是单张图片，而是多行文字+图标混合、或需要响应式适配时，vertical-align 的脆弱性会指数级上升。它的行为依赖太多隐式条件，调试成本远高于直接换方案。
推荐优先级：
真正难处理的，是那些混着换行符、动态插入文本、又必须保持 inline 布局的旧系统模板——这时候得先用 font-size: 0 清掉幽灵节点，再调 line-height，最后才轮到 vertical-align。顺序错了，全白搭。
