如何在父DIV中居中SVG元素？实现带文本红框居中

我需要让SVG中的红色方框（包含文本）居中显示在蓝色DIV的中心位置，以下是我尝试的代码：

尝试的CSS代码 #

#g-Car-Wash-Circle-box,
#g-Car-Wash-Circle-box .g-artboard {
  margin: 0 auto;
}

#g-Car-Wash-Circle-box p {
  margin: 0;
}

#g-Car-Wash-Circle-box .g-aiAbs {
  position: absolute;
}

#g-Car-Wash-Circle-box .g-aiImg {
  position: absolute;
  top: 0;
  display: block;
  width: 100% !important;
}

#g-Car-Wash-Circle-box .g-aiSymbol {
  position: absolute;
  box-sizing: border-box;
}

#g-Car-Wash-Circle-Artboard_1 {
  position: relative;
  overflow: hidden;
}

尝试的HTML代码 #

<div id="g-Car-Wash-Circle-box" class="ai2html">
  <!-- Artboard: Artboard_1 -->
  <div id="g-Car-Wash-Circle-Artboard_1" class="g-artboard" style="max-width: 500px;max-height: 500px" data-aspect-ratio="1" data-min-width="0">
    <div style="padding: 0 0 100% 0;"></div>
    <img id="g-Car-Wash-Circle-Artboard_1-img" class="g-aiImg" alt="" src="https://preview.inkto.art/522/Car-Wash-Circle-Artboard_1.jpg" />
    <div class="g-aiAbs" style="top:68.6633%; margin-top:-47.3px; width:100%; background-color: dodgerblue;">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 493 24" width="413" height="87"> 
          <rect x="1" y="1" width="413" height="95" fill="red" stroke-width="1.5" stroke="black"/> 
          <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="65%" fill="black">{{ Custom1 }}</text> </svg>
    </div>
  </div>
</div>

当前问题：红色方框并未在蓝色DIV内居中，且SVG内部元素的布局存在偏移。

解决方案 #

1. 调整蓝色DIV布局，让SVG居中 #

给蓝色DIV添加flex布局属性，强制内部元素水平垂直居中：

#g-Car-Wash-Circle-box .g-aiAbs {
  position: absolute;
  /* 新增居中样式 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 固定高度适配SVG尺寸 */
  height: 95px;
}

2. 修正SVG的viewBox与尺寸匹配 #

原SVG的viewBox（0 0 493 24）与实际宽高、内部rect尺寸不匹配，导致坐标系统混乱。将viewBox修改为0 0 413 95，同时微调rect尺寸避免边框超出SVG范围：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 413 95" width="413" height="95"> 
    <rect x="1" y="1" width="411" height="93" fill="red" stroke-width="1.5" stroke="black"/> 
    <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="65%" fill="black">{{ Custom1 }}</text> 
</svg>

3. 微调蓝色DIV垂直定位 #

将margin-top:-47.3px调整为margin-top:-47.5px，对应SVG高度95px的一半，让蓝色DIV自身在父容器中垂直居中更精准。

修改后的完整代码 #

CSS代码 #

#g-Car-Wash-Circle-box,
#g-Car-Wash-Circle-box .g-artboard {
  margin: 0 auto;
}

#g-Car-Wash-Circle-box p {
  margin: 0;
}

#g-Car-Wash-Circle-box .g-aiAbs {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 95px;
}

#g-Car-Wash-Circle-box .g-aiImg {
  position: absolute;
  top: 0;
  display: block;
  width: 100% !important;
}

#g-Car-Wash-Circle-box .g-aiSymbol {
  position: absolute;
  box-sizing: border-box;
}

#g-Car-Wash-Circle-Artboard_1 {
  position: relative;
  overflow: hidden;
}

HTML代码 #

<div id="g-Car-Wash-Circle-box" class="ai2html">
  <!-- Artboard: Artboard_1 -->
  <div id="g-Car-Wash-Circle-Artboard_1" class="g-artboard" style="max-width: 500px;max-height: 500px" data-aspect-ratio="1" data-min-width="0">
    <div style="padding: 0 0 100% 0;"></div>
    <img id="g-Car-Wash-Circle-Artboard_1-img" class="g-aiImg" alt="" src="https://preview.inkto.art/522/Car-Wash-Circle-Artboard_1.jpg" />
    <div class="g-aiAbs" style="top:68.6633%; margin-top:-47.5px; width:100%; background-color: dodgerblue;">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 413 95" width="413" height="95"> 
          <rect x="1" y="1" width="411" height="93" fill="red" stroke-width="1.5" stroke="black"/> 
          <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="65%" fill="black">{{ Custom1 }}</text> 
      </svg>
    </div>
  </div>
</div>

修改后，红色方框会在蓝色DIV内水平垂直居中，SVG内部的文本也会在红色方框中居中显示。

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