如何实现SVG图标在容器内居中 解决SVG默认靠容器左侧显示问题

首先你当前使用的SVG代码缺少viewBox属性，且路径的实际坐标范围超出了你设定的1000*1000画布边界，这是导致图形位置偏移、显示不全的核心原因，先修正SVG代码如下：

<svg class="record" xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 1280 900"
  version="1.1"
  xml:space="preserve"
  style="fill: rgb(123, 55, 32);"
  width="100%"
  height="100%">
  <rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none"/>
  <path d="M1244.68 306.4L686.8 135c-30.4-9.34-63.2-9.34-93.58 0L35.32 306.4c-47.08 14.46-47.08 76.72 0 91.18l97.26 29.88c-21.34 26.38-34.46 58.56-35.76 93.8C77.56 532.3 64 552.22 64 576c0 21.56 11.36 39.7 27.72 51.3L40.66 857.06C36.22 877.04 51.42 896 71.88 896h112.22c20.48 0 35.68-18.96 31.24-38.94L164.28 627.3C180.64 615.7 192 597.56 192 576c0-23.14-12.94-42.5-31.32-53.74 1.52-30.04 16.88-56.6 41.38-73.44L593.2 569c18.12 5.56 52.88 12.5 93.58 0l557.9-171.4c47.1-14.48 47.1-76.72 0-91.2zM705.58 630.18c-57.06 17.52-105.68 7.84-131.18 0l-290.04-89.1L256 768c0 70.7 171.92 128 384 128s384-57.3 384-128l-28.36-226.94-290.06 89.12z"  />
</svg>

以上代码添加了匹配路径实际坐标范围的viewBox属性，同时将宽高设为100%方便自适应容器尺寸，你也可以根据需求固定SVG的宽高数值。

修正SVG后，可以通过以下任意一种CSS方案实现SVG在容器内居中：

方案1：Flex布局（最通用，优先推荐） #

给SVG的父容器添加如下CSS，可同时实现水平和垂直方向居中：

/* SVG的父容器类名，可根据实际修改 */
.svg-wrapper {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中，不需要可以删除 */
  /* 自定义容器宽高 */
  width: 100px;
  height: 100px;
}

方案2：文本对齐（适合仅需水平居中的场景） #

SVG默认为行内块元素，给父容器设置文本居中即可实现水平居中：

.svg-wrapper {
  text-align: center;
  width: 100px;
  height: 100px;
}
/* 如需垂直居中，可添加以下规则 */
.svg-wrapper .record {
  vertical-align: middle;
}

方案3：Grid布局 #

父容器添加如下CSS即可快速实现双向居中：

.svg-wrapper {
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
}

内容的提问来源于stack exchange，提问作者Sara Ree