为何Flexbox无法居中SVG内的200×200px矩形？

嘿，这个问题我之前踩过坑！SVG的布局逻辑和普通HTML元素完全不是一套路，你用的flex布局只对SVG里的<text>、<foreignObject>这类偏文本/HTML的元素生效，对<rect>这种原生图形元素根本不起作用——这就是为啥文本能居中，矩形却纹丝不动的原因～

下面给你几个纯HTML/SVG就能实现的解决方案，都不用JavaScript：

方案1：用百分比定位+translate偏移（最灵活） #

这个方法不管你的SVG容器是固定尺寸还是自适应，都能让rect完美居中：

<svg width="400" height="400" style="border:1px solid #ccc;">
  <rect width="200" height="200" fill="#42b983"
        x="50%" y="50%" transform="translate(-50%, -50%)" />
</svg>

原理是先把rect的左上角定位到SVG的中心（x="50%" y="50%"），然后通过translate(-50%, -50%)把矩形向左向上偏移自身尺寸的一半，这样整个矩形就居中了。

方案2：计算固定坐标（适合SVG尺寸固定的场景） #

如果你的SVG尺寸是固定的，比如400×400，那直接计算rect的x和y值就行：

<svg width="400" height="400" style="border:1px solid #ccc;">
  <!-- (SVG宽度 - rect宽度)/2 = (400-200)/2 = 100 -->
  <rect x="100" y="100" width="200" height="200" fill="#42b983" />
</svg>

这个方法简单直接，就是需要手动算坐标，适合静态布局。

方案3：用viewBox+preserveAspectRatio（适合响应式SVG） #

如果你的SVG需要自适应父容器，用viewBox配合preserveAspectRatio可以让整个SVG内容居中：

<svg viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet" 
     width="100%" height="400" style="border:1px solid #ccc;">
  <rect width="200" height="200" fill="#42b983" />
</svg>

这里viewBox定义了SVG的坐标系统范围是200×200，preserveAspectRatio="xMidYMid meet"会让这个坐标系统在SVG容器里水平垂直居中，rect占满整个viewBox，自然就居中了。

记得SVG的坐标原点是左上角，和HTML的布局逻辑差异很大，以后碰到SVG布局问题，优先想SVG原生的属性，别套HTML的flex那套哦～

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