SVG在Flex容器中不居中，根本原因是其默认inline显示导致baseline对齐干扰，且viewBox偏移使视觉中心与盒模型中心不一致；需设display: inline-block、viewBox为"0 0 W H"、父容器有明确高度，并配justify-content和align-items双居中。
SVG在容器里不居中，不是SVG画得歪了，而是它的默认显示行为和对齐逻辑被忽略了。核心问题就两个：一是display默认是inline，按基线对齐；二是viewBox没配对或内容偏移，导致视觉中心≠盒模型中心。
SVG在Flex容器中align-items: center失效
这不是CSS写错了，是SVG还在走文字基线那一套。Flex的align-items: center只对子元素的盒模型起作用，而inline SVG的baseline由字体度量决定，和文本不一致。
- 必须给
svg加display: inline-block或display: block，切断baseline干扰 - 删掉所有
vertical-align——Flex下它无效，还掩盖真实问题 - 父容器要设明确高度（比如
min-height: 48px），否则align-items无轴可依 - IE11需补前缀：
display: -ms-flexbox+-ms-flex-align: center
SVG在表格td中底部留白
这是最常被当成“bug”的现象：SVG总悬在td底部空一截。根源就是display: inline + 基线对齐，SVG图形底部坐标不贴合文字基线。
- 可靠解法只有两个：
svg { display: inline-block; vertical-align: middle; }，同时确保td有vertical-align: middle - 或改用
display: block; margin: 0 auto;，适合单图标居中场景 - 绝对不要用
float: left或position: absolute，表格内会破坏渲染流，尤其table-layout: fixed下更易错位 - 必须声明
viewBox，且避免内联样式干扰布局
SVG自身viewBox导致视觉偏移
Flex居中的是整个svg元素的盒模型，不是里面图形的视觉中心。如果viewBox值带偏移（比如"10 10 24 24"），图形会整体右下漂移，看起来像“没居中”。
立即学习“前端免费学习笔记（深入）”；
- 检查SVG源码，理想
viewBox应为"0 0 W H"，如"0 0 24 24" - 显式声明
width和height，且值相等（如width: 24px; height: 24px;），避免拉伸变形 - 临时调试可用
border: 1px solid red看清SVG实际渲染边界是否对称 - 若无法改源文件，可用
transform: translate(-50%, -50%)微调，但这是权宜之计
真正难的不是写几行CSS，而是判断偏移来源：是父容器没高度？是viewBox原点不对？还是混用了vertical-align和Flex？一旦开始靠margin-top: -2px硬调，基本就掉进坑里了。
