优先用 display: flex + align-items: center 实现字体图标居中，因其绕过文本流、按视觉中心对齐；若容器宽高固定，可用 line-height + text-align: center；绝对定位适用于脱离文档流场景。
font-icon 元素居中不能只靠 text-align: center 或 vertical-align: middle，因为字体图标本质是文字，但渲染行为受字体度量、行高、基线偏移干扰严重——尤其在按钮、徽章、小容器里，常出现“看着没居中”的错觉。
为什么 vertical-align: middle 对字体图标基本无效
它只对 display: inline 或 inline-block 元素起作用，且对齐的是“行框中线”，不是容器视觉中心。而字体图标（如 <i class="icon-save"></i>）默认是 inline，但它的上升部/下降部高度由字体文件决定，vertical-align: middle 拿不到稳定锚点。
- 同一图标在不同字体（
"Material Icons"vs"Font Awesome"）下上下位置可能差 2–4px - 父容器若设了
line-height: 1.5，图标会被“吊”在基线上，文字却居中，造成视觉错位 - 加
display: inline-block后再设vertical-align: middle，仍受line-height和font-size联动影响，调试成本高
用 display: flex + align-items: center 最稳
把字体图标和文字（或仅图标自身）包进一个容器，设为 flex，就能绕过文本流计算，直接按视觉中心对齐。
- 容器必须有明确高度（比如
height: 32px），否则align-items: center无参考基准 - 图标本身不用额外包裹，
<i></i>或<span></span>直接当 flex item 即可 - 如果图标是纯符号（如
<i>★</i>），建议统一font-size和父容器文字大小，避免缩放不一致 - IE10/11 需加
display: -ms-flexbox前缀；若需支持 IE9，此方案不可用
最小可靠写法：
<div style="display: flex; align-items: center; height: 32px;"><i class="icon-save"></i></div>
单字符图标用 line-height + text-align 更轻量
当容器宽高固定（如 24×24px 图标按钮），line-height 等于容器高度，配合 text-align: center 是最简方案，兼容性极好（IE8+）。
- 必须设
box-sizing: border-box，否则border或padding会让总高度超预期 - 字体选择影响大：某些 emoji 字体（如
"Noto Color Emoji"）自带垂直偏移，测试时要换几种字体看 - 不要用
font-size过大再靠line-height撑开——会触发字体渲染截断，图标边缘被切
推荐写法：
<div style="width: 24px; height: 24px; line-height: 24px; text-align: center; font-size: 16px; box-sizing: border-box;"><i>★</i></div>
绝对定位适用于脱离文档流的图标
比如图标浮在图片右上角、或作为 loading 状态覆盖层，此时用 position: absolute + transform: translate(-50%, -50%) 最精准，不依赖尺寸。
- 父容器必须设
position: relative，否则定位基准错乱 - 图标元素需显式设
top: 50%+left: 50%，再用transform反向偏移自身宽高一半 - 若图标宽高动态变化（如响应式 SVG），
transform依然生效；但margin负值方案会失效 - IE9+ 支持
transform，IE8 需回退到top/left+ 固定负margin
真正麻烦的不是怎么写，而是同一个图标在不同上下文里要换不同方案——按钮里用 flex，徽章里用 line-height，弹窗里用 absolute。别试图找“万能写法”，先看它在哪、多大、要不要响应式，再选。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
