vertical-align: middle 必须配合 display: inline-block 或 table-cell 才生效，因该属性仅作用于 inline、inline-block、inline-table 和 table-cell 元素；直接用于 img 或 span 若未显式设置对应 display 值则无效，且其“中”指行框中线而非容器中点，受 font-size 和 line-height 影响。
vertical-align: middle 必须配合 inline-block 或 table-cell
直接给 <img> 或 <span> 写 vertical-align: middle 通常没反应，因为该属性只对 display 值为 inline、inline-block、inline-table 或 table-cell 的元素生效。块级元素（如默认的 <div>）设了也忽略。
常见错误现象：img { vertical-align: middle; } 单独写，图片底部仍留白；或文字和图标上下错位，像被“吊”在行高基线上。
- 确保图标和文字都在同一行内流中：父容器不用改，但子元素需显式声明
display: inline-block - 若用
display: table-cell，父容器必须同步设display: table，语义冗余，不推荐 -
vertical-align: middle的“中”是相对于整行的行框中线（line box center），不是容器高度中点——所以父容器font-size和line-height会直接影响对齐位置
flex 布局更可控，但别忘了 align-items 默认作用于交叉轴
把图标和文字包进一个容器，设 display: flex，再加 align-items: center，就能稳定垂直居中。它不依赖行高、字体或基线，逻辑清晰。
容易踩的坑：align-items 控制的是“交叉轴”，对默认 flex-direction: row 来说就是垂直方向；但如果容器里混了 float 元素或 position: absolute 子项，它们会脱离 flex 流，不受 align-items 影响。
立即学习“前端免费学习笔记（深入）”；
- 图标和文字建议都用原生行内标签（如
<img>+<span>），不用额外包裹<div> - 如果文字换行，
align-items: center仍会让整个<span>盒子垂直居中，不是每行文字单独对齐 - IE10/11 中，若子元素有
min-height，可能被压缩，可加flex-shrink: 0锁定尺寸
line-height 仅适用于单行纯文本 + 固定高容器
如果你只是让一个图标旁跟一段单行说明文字（比如按钮里的 <i class="icon"></i><span>保存</span>），且容器高度固定，line-height 是最轻量的方案。
但它本质是“撑高行框”，不是真居中。一旦文字变多、字号响应式变化、或容器高度用百分比，就立刻失效。
- 必须同时满足：
height和line-height数值完全相等（差 1px 都偏移） - 文字容器不能是
display: block，否则line-height不起作用；得保持inline或inline-block - 中英文混排时，因字体基线差异，视觉上常略偏下，需微调
line-height补偿
绝对定位 + transform 不适合图文混排场景
position: absolute; top: 50%; transform: translateY(-50%) 确实能精准垂直居中单个元素，但它是脱离文档流的。如果图标和文字要并排显示、还要响应式换行或对齐右边界，这套方案会直接崩。
它适合弹窗标题、加载图标这类独立、无布局依赖的元素，不适合行内图文组合。
- 父容器必须设
position: relative，否则top: 50%会相对视口定位，整个图标飘到页面顶部中间 - 若同时水平居中，
left: 50%和transform: translate(-50%, -50%)要一起写，顺序不能反 - 文字内容动态插入时，无法自动适配高度变化；而
flex和vertical-align都能实时响应
真正难的不是选哪个方案，而是判断图文是否属于同一语义单元。如果是操作按钮里的图标+文字，用 flex 最稳；如果是段落中穿插的行内图标，vertical-align + inline-block 更自然。别为了“居中”强行统一写法，上下文决定技术选择。
