如何水平居中由两条path构成的SVG组合圆形？

我来帮你搞定这个SVG居中的问题，先分析下为啥会出现只有左半部分居中的情况：

问题根源 #

1. 尺寸不匹配：你的容器.c-container设置了width: 100px，但内部<svg>却用了width: 500%，导致SVG实际显示宽度是500px——远大于容器宽度。容器本身用margin: 0 auto居中了，但SVG默认左对齐容器，所以SVG的右侧400px会超出容器向右延伸，看起来就只有左半部分在页面居中区域。
2. 属性拼写错误：SVG的viewbox应该写成viewBox（大写B），大小写错误会让浏览器无法正确解析 viewBox 规则，进一步影响SVG的缩放和定位。

解决方案 #

方案一：调整容器与SVG的尺寸关系（推荐）

这个方法布局更清晰，没有hack，直接让容器宽度匹配SVG的显示尺寸，再让容器居中：

修改后的CSS：

body{ 
  background: #1c222e; 
  padding: 30px; 
} 
.c-container { 
  width: 500px; /* 设置为SVG最终需要的显示宽度 */
  margin: 0 auto; /* 容器水平居中 */
} 
.c-container svg { 
  width: 100%; /* SVG占满容器宽度 */
  height: auto; /* 自动保持宽高比 */
}

修正后的HTML（重点改viewbox为viewBox）：

<div class="c-container"> 
  <svg id="yeah" viewBox="0 0 100 100"> 
    <path id="bg" stroke-linecap="round" stroke-width="4" stroke="#212b37" fill="none" d="M50 2 a 48 48 0 0 1 0 96 a 48 48 0 0 1 0 -96"> </path> 
    <path id="progress" stroke-linecap="round" stroke-width="4" stroke="#7bdccd" fill="none" d="M50 2 a 48 48 0 0 1 0 96 a 48 48 0 0 1 0 -96"> </path> 
  </svg> 
</div>

方案二：保持容器宽度，让SVG中心对齐容器

如果必须固定容器宽度为100px，可以通过定位偏移让SVG中心和容器中心对齐：

修改后的CSS：

body{ 
  background: #1c222e; 
  padding: 30px; 
} 
.c-container { 
  width: 100px; 
  margin: 0 auto; 
  position: relative; /* 作为SVG定位的参考 */
  overflow: visible; /* 允许SVG超出容器显示 */
} 
.c-container svg { 
  width: 500%; 
  position: relative; 
  left: -200%; /* 向左偏移2倍容器宽度，让SVG中心与容器中心对齐 */
  height: auto;
}

同样需要把HTML里的viewbox改成viewBox。

这个偏移的计算逻辑：SVG宽度是容器的5倍，超出部分是4倍容器宽度，要让中心对齐，就得向左偏移一半的超出宽度，也就是2倍容器宽度（200%）。

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