text-align对absolute图标无效，因其已脱离文档流；正确做法是父容器设position: relative，图标用top: 50% + transform: translateY(-50%)垂直居中，并预留padding适配位置。
absolute 定位图标时，为什么 text-align 没用
因为 position: absolute 元素已脱离文档流，text-align 只作用于行内内容或 inline-block 元素，对绝对定位子元素完全无效。常见错误是给父容器加 text-align: center 后发现图标纹丝不动——这不是 bug，是 CSS 规范行为。
让图标在文本左侧/右侧精确垂直居中的关键步骤
核心是：父容器设 position: relative，图标设 position: absolute，再用 top + transform 或 top + height 配合计算。
- 父容器必须有明确高度（如
height: 32px）或通过line-height建立基线参考 - 图标需设定宽高（如
width: 16px; height: 16px），否则transform: translateY(-50%)会失准 - 垂直居中推荐写法：
top: 50%; transform: translateY(-50%);—— 比硬写top: 8px更鲁棒，适配不同字号 - 若图标在文本左侧，父容器加
padding-left: 32px（预留图标+间距），图标设left: 12px；右侧则反向处理
容易被忽略的兼容性与微调细节
IE8+ 支持 absolute，但不支持 transform。若需兼容老浏览器，改用 top: calc(50% - 8px)（假设图标高 16px），或退回到 vertical-align + inline-block 组合。
-
transform在缩放、动画场景下可能引发 subpixel 渲染模糊，可加will-change: transform或用translateZ(0)触发硬件加速 - 字体图标（如
<i class="icon-home"></i>）用 absolute 定位时，记得重置其默认vertical-align: baseline，否则文字仍会错位 - 移动端 viewport 缩放后，
px值可能失准，建议图标尺寸用em或rem，配合font-size统一调控
和 flex 布局相比，absolute 定位适合什么场景
当图标是装饰性、非语义化元素，且需要脱离文本流自由偏移（比如悬浮提示、角标、叠加在文字上方的徽章），absolute 是更轻量、更可控的选择。flex 虽简洁，但会让图标成为布局参与元素，影响换行、对齐逻辑和可访问性语义。
立即学习“前端免费学习笔记（深入）”；
真正难的不是写对 left 和 top，而是判断这个图标该不该进文档流——一旦它承担了交互或语义功能（比如“关闭”按钮里的 ×），就该回归 flex 或 inline-block 方案。
