自定义SVG图标无法居中，同款CSS对官方Material Design图标有效

嘿，我来帮你搞定这个自定义SVG图标居中的问题～ 从你描述的情况来看，官方Material图标能正常居中但自定义SVG不行，大概率是SVG本身的属性设置或者针对SVG的CSS细节缺失导致的，下面给你几个具体的排查和解决方向：

1. 检查SVG的viewBox和固有尺寸 #

很多自定义SVG会自带多余的空白区域，或者没有正确设置viewBox属性，这会导致图标在容器里看起来没居中：

• 打开你的SVG文件，确认顶部的<svg>标签是否包含viewBox属性，比如Material图标通常用viewBox="0 0 24 24"，确保你的SVG的viewBox刚好包裹图标内容，没有额外的留白。
• 如果SVG有默认的width/height属性，建议删掉，改用CSS来控制尺寸，保持和Material图标一致（比如24px或者1em）。

2. 给自定义SVG添加对齐相关的CSS #

Material图标一般是字体形式或者有预设的对齐样式，自定义SVG作为行内元素，需要额外的CSS来适配你的容器布局。结合你给出的容器CSS，试试给自定义SVG加上这些样式：

.custom-svg-icon {
  width: 24px; /* 和Material图标尺寸统一 */
  height: 24px;
  vertical-align: middle; /* 配合容器的line-height实现垂直居中 */
  fill: currentColor; /* 继承容器的文字颜色，和Material图标风格统一 */
}

你的容器设置了line-height: 50px和text-align: center，加上vertical-align: middle后，SVG就能和容器内的其他元素垂直对齐，水平方向text-align: center也能生效。

3. 排查SVG内部的空白元素 #

有些SVG导出时会自动添加透明的矩形或者空白路径，导致图标实际占比偏小且偏移。可以用SVG编辑器（比如Figma、Inkscape）打开你的SVG，删除所有无关的空白元素，只保留图标本身的路径，再重新导入使用。

补充完整示例代码 #

把你的容器CSS和SVG样式结合起来，完整代码大概是这样：

div.container {
  max-width: 512px;
  min-width: 256px;
  height: 50px;
  margin: auto;
  color: #000000;
  background-color: #ffffff;
  line-height: 50px;
  text-align: center;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.custom-svg-icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  fill: currentColor;
  background-color: aquamarine; /* 保留你的背景色方便调试 */
}

试试上面的方法，应该就能让自定义SVG和官方Material图标一样完美居中啦～

内容的提问来源于stack exchange，提问作者Mike Me