How to Center an Svg in a Div

How do I center an SVG in a div?

SVG is inline by default. Add display: block to it and then margin: auto will work as expected.

Center an SVG inside a DIV

Make the div position:relative and the svg position:absolute
For the svg give it top:(calc 50% - 24px) and left:(50% - 24px)

That's 50% of containing div's height minus half the height of svg and 50% of containing div's width minus half the width of svg. A position:absolute element (i.e. svg) boundaries are it's position:relative parent's (i.e. .foo) borders.

SNIPPET

.svg {  display: block;  margin: 0 auto;  position: absolute;  top: calc(50% - 24px);  left: calc(50% - 24px);}.foo {  height: 150px;  width: 150px;  position: relative;  border-radius: 50%;  border: 20px solid brown;  background: black;}

<div class="foo ball design">  <svg class="svg pen" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48">    <g>      <path data-color="color-2" fill="#e00" d="M5.586,15L15,5.586l-3.293-3.293c-0.391-0.391-1.023-0.391-1.414,0l-8,8 c-0.391,0.391-0.391,1.023,0,1.414L5.586,15z"></path>      <rect data-color="color-2" x="7.636" y="10.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.9203 14.293)" fill="#e00" width="13.313" height="7.314"></rect>      <rect data-color="color-2" x="28.05" y="29.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.3761 34.707)" fill="#e00" width="13.313" height="10.143"></rect>      <path data-color="color-2" fill="#e00" d="M44.085,35.329l-8.757,8.757l9.475,1.895C44.869,45.994,44.935,46,45,46 c0.263,0,0.518-0.104,0.707-0.293c0.236-0.236,0.339-0.575,0.273-0.903L44.085,35.329z"></path>      <path fill="#136f71" d="M45.707,12.293l-10-10c-0.391-0.391-1.023-0.391-1.414,0l-5.291,5.291l2.706,2.709 c0.39,0.391,0.39,1.024-0.001,1.414C31.511,11.902,31.256,12,31,12c-0.256,0-0.512-0.098-0.708-0.293l-2.705-2.708l-3.584,3.584 l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C25.52,15.902,25.264,16,25.008,16s-0.512-0.098-0.707-0.293l-1.711-1.711 l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414C22.52,22.902,22.264,23,22.008,23s-0.512-0.098-0.707-0.293 l-3.711-3.711l-3.586,3.586l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C15.52,25.902,15.264,26,15.008,26 s-0.512-0.098-0.707-0.293l-1.711-1.711l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414 C12.52,32.902,12.264,33,12.008,33s-0.512-0.098-0.707-0.293L7.59,28.996l-5.297,5.297c-0.391,0.391-0.391,1.023,0,1.414l10,10 C12.488,45.902,12.744,46,13,46s0.512-0.098,0.707-0.293l32-32C46.098,13.316,46.098,12.684,45.707,12.293z M38,16 c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2s2,0.895,2,2C40,15.105,39.105,16,38,16z"></path>    </g>  </svg></div>

Why my svg is not centered inside div container?

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>

centering an SVG inside a div

You are setting the width to 100%, then shifting it over by 100px. The width is still calculated as whatever the 100% width is. To center it the way you want, you will need to subtract 100px from the width or nest things differently.

.main {
  position:fixed;  
  left:100px;
  height: 100%;
  width:calc(100% - 100px);
  background: #33AAAA;
}

Align svg to center of screen

Try CSS:

#svgMain {margin-left:auto; margin-right:auto; display:block;}

How to position my svg image to the center of browser

I think this is what you want?
The SVG will be position in the center even the browser resized and scroll

ON GLOBAL CSS

CSS:

#container {
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
}

INSIDE SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 439.29 439.29" width="100%" height="100%">    <g id="group">      <circle cx="219.64" cy="219.64" r="219.64" style="fill: #ffb721" id="path"/>      <circle cx="219.64" cy="219.64" r="108.32" style="fill: #f71c17" id="path2"/>    </g>  </svg>

vertical center svg in div container

html, body {   height: 100%;  }#svg-container{  display: flex;  align-items: center;  background-color: red;  height: 100%;}
#svg-1{  margin: 0 auto;  display: block;}

<div id="svg-container">  <svg id="svg-1" height="15px" width="15px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" version="1.1">     <circle r="15" cx="15" cy="15"></circle>  </svg></div>

What's the best way to center an SVG horizontally and vertically inside a div tag?

If you plan on setting fixed positions, pixel sizes and margins yourself, just adjust the svg vertical margin.

    <div style="width: 64px;height: 64px;background-color: rgba(0,0,0,.7);background-repeat: no-repeat;background-size: 24px;background-position: 58% 50%;border-radius: 500px;border: 1px solid blue;cursor: pointer;">                <svg viewBox="-22 0 1229 1481" width="24" height="29" style="display:block;margin:16px auto;background-color:green;">        <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/>        </svg>        </div>