How to center SVG in a parent DIV

Question

I have the following item which is in an SVG tag. My goal is to place the red box with the text centered in the center of the blue div. Here is my attempt and code:

#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;
}

<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>

Minimal example in codepen: Codepen

Does this answer your question? [How to center an element horizontally and vertically](https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — Heretic Monkey, Jul 14 '23 at 18:41
I suggest moving all CSS to the stylesheet or it's going to be difficult to figure out what's going on where. — Heretic Monkey, Jul 14 '23 at 18:43

How to center SVG in a parent DIV

0 Answers0