vertical-align: middle 仅对 inline、inline-block、table-cell 元素生效，其“中”指行框中线而非容器中点，受 font-size、line-height 等影响易漂移。
vertical-align: middle 单独写在 img 或 i 上基本无效，因为该属性只对 inline、inline-block、table-cell 元素起作用，且“中”指的是行框中线（line box center），不是容器高度中点——字体大小、行高、父级 font-size 变动都会让它漂移。
为什么 vertical-align: middle 总是不生效
常见错误现象：img { vertical-align: middle; } 加了但图标底部仍有白边；文字和图标一高一低，像被吊在基线上；换字体或缩放后突然错位。
- 确保图标和文字都在同一行内流中：显式给两者加
display: inline-block，否则vertical-align不触发 - 父容器不用改
display，但子元素必须同步声明——img和span都得设display: inline-block - 如果容器有固定高度，优先配
line-height等于该高度，再配合vertical-align: middle，比纯靠vertical-align更稳 - 用字体图标（如 Bootstrap Icons）时，确认没覆盖默认的
vertical-align: -.125em；若失效，删掉所有自定义display，再显式写vertical-align: middle
display: flex + align-items: center 怎么不翻车
align-items: center 是目前最可控的垂直居中方案，但它只作用于交叉轴（默认 flex-direction: row 时即垂直方向），且只影响参与 flex 流的**直接子项**。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 子元素用了
float或position: absolute，会脱离 flex 流，align-items完全无效 - 文字换行后，
align-items: center仍按整个span盒子垂直居中，不是每行文字单独对齐 - IE10/11 中，若子项有
min-height，可能被压缩；可加flex-shrink: 0锁定尺寸 - 图标和文字都用原生行内标签（如
img或svg+span），避免额外嵌套div破坏直系关系
超链接里图标和文字怎么真正居中
超链接默认是行内元素，内部图标和文字天然按 baseline 对齐，视觉上总是一高一低。直接给 a 设 display: flex + align-items: center，就能让子元素在交叉轴上真正居中。
- 确保图标是
svg或img，不要用i包字体图标（除非你确认它保持display: inline且没被父级 flex 干扰） - 别在
a里嵌套div或strong再设display: block——这会破坏 flex 子项的直系关系 - 用
gap: 6px控制图标与文字间距，比margin-right更稳定，不会影响对齐基准 - IE11 需补
-ms-flex-align: center，但 2026 年绝大多数项目可忽略
最容易被忽略的是：哪怕只多一个空格、一行换行符、或一层未察觉的 display: inline-block 嵌套，都可能让 align-items: center 失效——它不看渲染结果，只看 flex 流中的直系子项结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
