Why my svg is not centered inside div container?

Question

I have the following code

.services-container {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.services-container svg {
    width: 70px;
  /*margin: 0 auto;
    display: block; */

}

.services-branding {
    width: 300px;
}

.services-branding figcaption {
    text-align: center;
}

.services-branding p {
    text-align: center;

}

  <div class="services-container">
        <figure class="services-branding">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="120"
            height="124"
            viewBox="0 0 120 124"
          >
            <g>
              <g>
                <g><path fill="#d84848" d="M120 14H56v66h64L99.844 47z" /></g>
                <g><path fill="#aa1f1f" d="M56 66.75V80l17-11z" /></g>
                <g><path fill="#f57b71" d="M73 69H25L6.656 5H73z" /></g>
                <g>
                  <path
                    fill="#daeaf2"
                    d="M4.436.18a5 5 0 0 1 6.123 3.536l30.54 113.98a5 5 0 0 1-9.658 2.587L.9 6.304A5 5 0 0 1 4.435.18z"
                  />
                </g>
              </g>
            </g>
          </svg>
          <figcaption>branding</figcaption>
          <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
            nonummy nibh.
          </p>
        </figure>
      </div>

My question is why the svg is not centered like others elements? It only works when I add to svg display:block and margin: 0 auto but Im not sure if this the right way to center it. Could you guys explain me? Thanks from in advance!

Answer 1

Its because text-align: center would not center the <svg>. You need to apply the flexbox properties to the direct parent of the <svg>, which is .services-branding like shown below:

.services-container {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.services-container svg {
  width: 70px;
}

.services-branding {
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.services-branding figcaption {
  text-align: center;
}

.services-branding p {
  text-align: center;
}

<div class="services-container">
  <figure class="services-branding">
    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="124" viewBox="0 0 120 124">
      <g>
        <g>
          <g><path fill="#d84848" d="M120 14H56v66h64L99.844 47z" /></g>
          <g><path fill="#aa1f1f" d="M56 66.75V80l17-11z" /></g>
          <g><path fill="#f57b71" d="M73 69H25L6.656 5H73z" /></g>
          <g>
            <path
              fill="#daeaf2"
              d="M4.436.18a5 5 0 0 1 6.123 3.536l30.54 113.98a5 5 0 0 1-9.658 2.587L.9 6.304A5 5 0 0 1 4.435.18z"
            />
          </g>
        </g>
      </g>
    </svg>
    <figcaption>branding</figcaption>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
    </p>
  </figure>
</div>

Answer 2

It's a property of SVG elements, their node points (viewport and viewbox) are by standard, starting on the top-left and not on the center of the SVG element. So that's why whenever you try to center the vector, it doesn't fit right like images.

You could try to add :

display: block;
margin: auto;

OR, add text-align: center; to the container <div>

Also, you could check out trying to add preserveAspectRatio="xMaxYMax meet" to the <svg> tag

I'd recommend you to have different sizes of the vector as images and use them accordingly on your needs while builing the code of your page, as it's easier to manipulate images rather than vectors on CSS.

More information about vectors : https://www.w3schools.com/graphics/svg_intro.asp

And about the preserveAspectRatio : https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio