SVG默认不居中是因为display: inline导致基线对齐，视觉“悬空”；需用display: inline-block + vertical-align: middle修复，或display: block + margin: 0 auto（需设width）；必须声明viewBox并配合相对尺寸与preserveAspectRatio才能实现真正响应式。
SVG在HTML中默认不居中的根本原因
不是SVG写错了，而是display: inline的默认行为在作祟。SVG作为内联元素，会像文字一样按基线（baseline）对齐——它的底部坐标默认不贴合父容器的基线，导致视觉上“悬空一截”。这种留白在<td>、<span>或纯文本行内出现最明显，常被误认为是SVG自身有margin或padding。
用display + vertical-align快速修复单图标居中
适用于图标与文字并排、或放在<td>里需要上下居中的场景：
- 给
<svg>加style="display: inline-block; vertical-align: middle;"，同时确保父容器（如<td>或<div>）也设了vertical-align: middle - 若不需要和文字混排，直接设
display: block; margin: 0 auto;更干净，但必须配合明确的width（否则auto无效） - 千万别只调
line-height或硬塞margin-top——这些是hack，换字体大小或DPR变化时立刻失效
viewBox不设等于放弃响应式缩放能力
没设viewBox的SVG，width和height就只是CSS像素尺寸，图形会被强制拉伸或裁剪，且在高DPR设备上模糊。正确做法是：
- 必须声明
viewBox，格式为"0 0 [width] [height]"，其中宽高比要和内部图形实际布局一致 - 移除
width/height的固定像素值，改用width="100%" height="auto"或相对单位（如1.5rem） - 若需适配不同容器比例，配合
preserveAspectRatio="xMidYMid meet"（默认值，安全）或"slice"（填满不留白）
多行文字+SVG组合居中必须用Flexbox
当SVG要和标题、段落甚至换行文字一起垂直居中时，基线对齐方案彻底失效。此时唯一可靠路径是：
立即学习“前端免费学习笔记（深入）”；
- 把SVG和文字包进一个
<div>，设display: flex; align-items: center; - SVG本身用
width/height设相对尺寸（如1.5rem），并加flex-shrink: 0防压缩 - 用
gap代替margin控制间距，避免外边距坍塌问题 - 避免把SVG塞进
<h1>等语义化标签内部再套样式——它们自带margin和display行为，干扰更大
真正容易被忽略的是viewBox和display的耦合关系：哪怕vertical-align: middle生效了，如果没设viewBox，SVG在缩放后依然会糊、会变形、会在某些设备上错位。这两个属性从来不是二选一，而是必须同时处理的最小闭环。
