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.


.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="" xmlns: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="" width="120" height="124" viewBox="0 0 120 124">
<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>
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"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.

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



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


<svg xmlns="" 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="" 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.