vertical-align: middle 只对 inline 或 inline-block 元素生效，因其专用于行内格式化上下文，通过将元素中点与父元素基线加½x-height 对齐来实现近似居中，对块级、flex 或 grid 子项无效。
vertical-align: middle 为什么只对 inline 元素生效
因为 vertical-align 的设计初衷就是控制行内格式化上下文（inline formatting context）中元素的基线对齐行为。它不作用于块级元素，也不影响 flex 或 grid 子项——哪怕你给 <p></p> 加了 vertical-align: middle，浏览器也会直接忽略。
常见错误现象：<div>
<img><p>文字</p>
</div> 中给 <img> 设 vertical-align: middle 没反应 → 原因是 <p></p> 是 block 级，破坏了行内上下文；文字和图片根本不在同一个“行盒”里。
- 修复方法：把文字容器改成
<span></span>，或给<p></p>加display: inline-block -
<img>默认就是inline，无需额外设display - 慎用
vertical-align: baseline，它受字体 descender 高度影响，换字体就偏移
flex 布局中 align-items: center 不生效的三个原因
写了 display: flex 和 align-items: center 却没垂直居中？大概率掉进了这三个坑之一。
- 父容器没设高度（比如
height: auto），align-items缺少垂直参考基准 - 子元素用了
float或position: absolute，已脱离 flex 流，不再受align-items控制 - 文字和图片被拆成两个独立子项（如
<img><p></p>），而<p></p>的 margin/padding 撑高了自身，导致视觉错位
稳妥做法：把图文包进一个 <div> 再作为单个 flex item，或统一用 <code><span></span> + display: inline-block 配合 vertical-align。
text-align: center 加在哪才管用
text-align: center 必须写在**图文的共同父容器**上，且该容器不能是 display: flex 或 display: grid —— 否则会被布局模型接管，样式失效。
- 正确：
<p style="text-align: center"><img>文字</p>（<p></p>是 inline 上下文，<img>默认 inline） - 错误：
<img style="max-width:90%">（text-align对<img>自身无意义） - 错误：
<div style="display: flex; text-align: center"> <img><span>文字</span> </div>（flex 下text-align被忽略）
它只负责水平居中，对垂直方向完全不管；想图文都居中，必须搭配其他方案（如 flex 或 vertical-align）。
响应式场景下 vertical-align 和 flex 如何选
小图标+文字按钮、表单提示这类固定尺寸、高频复用的场景，优先用 vertical-align: middle —— 轻量、零 JS、IE8+ 兼容、不干扰文档流。
需要动态缩放、换行控制、或图文尺寸差异大（比如头像+长段描述）时，必须切到 flex：flex-wrap: wrap + @media + flex-direction: column 才能真正可控。
容易被忽略的一点：当父容器 font-size: 0（为消除 inline 元素间空隙）时，vertical-align: middle 的参照系会失准——记得在子元素里重设 font-size，否则文字可能消失或错位。
