SVG垂直居中需先设display: block脱离行内流，否则baseline干扰导致top:50%起点偏移；再配合top:50%和transform:translateY(-50%)才真正居中，viewBox非"0 0 W H"时仍可能视觉偏移。
绝对定位的 SVG 图标用 top: 50% + transform: translateY(-50%) 能垂直居中，但前提是它不参与行内格式化上下文（IFC）——否则 top 的计算基准会被 vertical-align 或 baseline 拉偏，结果“看起来居中了，实际偏上 3px”。
为什么 top:50% 有时失效？
SVG 默认是 display: inline，在父容器中按 baseline 对齐。此时 top: 50% 的 50% 是相对于父容器 height 计算的，但元素的“起始位置”已被 vertical-align: baseline 下拉，导致 translateY(-50%) 移动的是一个已经下沉的起点。
- 检查 computed 样式：如果
display是inline或inline-block，且没显式设vertical-align，就极可能踩坑 - 用 DevTools 的 box-model 面板看 baseline 红线，对比相邻文字，常能发现 2–4px 偏移
-
top: 50%本身没错，错在起点被 IFC 规则悄悄改写了
必须加 display: block 吗？
是的，这是最简、最稳的解法。只要 SVG 不再是行内元素，top: 50% 就真正从父容器 content-box 顶部开始量起。
-
display: block彻底脱离 IFC，baseline 干扰归零 - 不需要配
vertical-align，也不用猜 middle/text-bottom 哪个更准 - 若 SVG 是
img { display: block; } - 注意：设为
block后，若父容器是 flex，还需确认是否意外触发了align-items: stretch拉伸
viewBox 不是 0 0 时会怎样？
即使 display: block + top: 50% + transform: translateY(-50%) 全到位，图标视觉上仍可能“偏下”或“偏右”。根源在 SVG 自身的坐标系偏移。
- 打开 SVG 源码，检查
viewBox属性，如viewBox="10 10 24 24"表示内容从 (10,10) 开始绘制，左上角有 10px 空白 - 这种空白会被
transform一并居中，导致图标实际内容离中心更远 - 修复方式：用编辑器重设
viewBox="0 0 W H"，或手动调整transform偏移量（不推荐，维护成本高） - 临时验证：给父容器加
overflow: visible和边框，把 SVG 边界“露出来”看
真正卡住人的从来不是 top: 50% 或 translateY 写得对不对，而是 SVG 在 DOM 中的身份模糊——它既是图形，又被 CSS 当作文本流里的一个字符处理。一旦忘了先把它踢出行内流，后面所有居中逻辑都在给错误前提打补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
