如何在CSS中居中<svg>标签内的<use>标签？

我有如下HTML代码：

<svg class="icon">
   <use href="icon.svg#icon"></use>
</svg>

需要让标签在

我尝试给标签设置以下两种CSS方式，都没效果：
第一种：

position:absolute;
top:50%;
bottom:50%;
transform:translate(-50%, -50%);

第二种：

display: flex;
align-items: center; /* vertical alignment */
justify-content: center;

更新：
我大概解决了问题，但搞不懂原因：当给

为什么之前的方法没用？ #

SVG元素的布局逻辑和普通HTML元素不同，flex、position:absolute这类针对HTML盒模型的布局属性，对SVG内部的<use>元素不生效，所以用这些方法无法实现居中。

两种有效解决方法 #

方法1：用SVG原生属性自动居中

给<svg>添加viewBox和preserveAspectRatio属性，让内部图标自动适配并居中：

<svg class="icon" width="20" height="20" viewBox="0 0 20 20" preserveAspectRatio="xMidYMid meet">
  <use href="icon.svg#icon"></use>
</svg>

• viewBox="0 0 20 20"：定义SVG的坐标系统范围和容器尺寸一致（20×20）
• preserveAspectRatio="xMidYMid meet"：指定内部内容在 viewBox 中水平垂直居中，同时保持原有比例

方法2：手动计算偏移量

通过<use>的x和y属性设置偏移，让图标居中：
水平偏移 = (容器宽度 - 图标宽度)/2 = (20-13)/2 = 3.5
垂直偏移 = (容器高度 - 图标高度)/2 = (20-10)/2 = 5
代码如下：

<svg class="icon" width="20" height="20">
  <use href="icon.svg#icon" x="3.5" y="5"></use>
</svg>

关于你遇到的更新问题 #

当你给<svg>设置width和height但没指定viewBox时，SVG会默认使用引用图标的viewBox（也就是13×10）。此时20×20的容器会把13×10的坐标系统拉伸填满，但内容还是从原坐标的(0,0)位置开始渲染，所以看起来图标跑到了左上角。只要加上正确的viewBox和preserveAspectRatio，就能让内容保持居中。

内容的提问来源于stack exchange，提问作者4lll0w_3v1l