How do I center a SVG in a div?

Question

I have a SVG that I am trying to center in a div. The div has a width of 900px. The SVG has a width of 400px. The SVG has its margin-left and margin-right set to auto. Doesn't work, it just acts as if the left margin is 0 (default).

Does Anyone know what's the error?

Answer 1

SVG is inline by default.

Add display: block to it and then margin: auto will work as expected.

Or depending on your layout you may want to keep SVG inline and set text-align: center on a parent element instead.

As another alternative, you can center SVG using flex or grid layouts on the parent element.

Answer 2

<div align="center">
  /* svg code */
</div>

This code center SVG in div element.

Answer 3

Thank you for this answer but just to add you can use px instead of %

position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);

Answer 4

Put these two lines in style.css In your specified div class.

   display: block;
   margin: auto;

and then try to run it, you will be able to see that svg is now aligned in the center.

Answer 5

HTML:

<div class="wrap-center">
    <svg width="20px" height="20px"></svg>
</div>

CSS:

.wrap-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

Answer 6

None of the above answers worked for me. If the SVG is from Google Icons try this:

display: inline-block;
width: 24px;
vertical-align: middle;

Answer 7

Just treat the container as flex and center the svg item by flex properties:

<div classname='icon'>
  <svg>.....</svg>
</div>

.icon{
  display:flex;
  align-items:center;
  justify-content:center;
 }

Answer 8

You can also do this:

  <center>
    <div style="width: 40px; height: 40px;">
        <svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
            <use class="sqs-use--icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-icon">
                <svg id="twitter-icon" viewBox="0 0 64 64" width="100%" height="100%">
                    <path
                        d="M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z"
                        />
                </svg>
            </use>
        </svg>
    </div>
  </center>

Answer 9

Flexbox is another approach: add

.container {
  display: flex;
  justify-content: center;
}

And add the .container class to the div which contains your svg.

Answer 10

For me, the fix was to add margin: 0 auto; onto the element containing the <svg>.

Like this:

<div style="margin: 0 auto">
   <svg ...</svg>
</div>

Answer 11

Put your code in between this div if you are using bootstrap:

  <div class="text-center ">
  <i class="fa fa-twitter" style="font-size:36px "></i>
  <i class="fa fa-pinterest" style="font-size:36px"></i>
  <i class="fa fa-dribbble" style="font-size:36px"></i>
  <i class="fa fa-instagram" style="font-size:36px"></i>
  </div>

Answer 12

Having read above that svg is inline by default, I just added the following to the div:

<div style="text-align:center;">

and it did the trick for me.

Purists may not like it (it’s an image, not text) but in my opinion HTML and CSS screwed up over centring, so I think it’s justified.

Answer 13

Above answers did not work for me. Adding the attribute preserveAspectRatio="xMidYMin" to the <svg> tag did the trick though. The viewBox attribute needs to be specified for this to work as well. Source: Mozilla developer network

Answer 14

Answers above look incomplete as they are talking from css point of view only.

positioning of svg within viewport is affected by two svg attributes

1. viewBox: defines the rectangle area for svg to cover.
2. preserveAspectRatio: defined where to place the viewBox wrt viewport and how to strech it if viewport changes.

Follow this link from codepen for detailed description

<svg viewBox="70 160 800 190" preserveAspectRatio="xMaxYMax meet">

Answer 15

I had to use

display: inline-block;

Answer 16

None of these answers worked for me. This is how I did it.

position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);

Answer 17

make sure your css reads:

margin: 0 auto;

Even though you're saying you have the left and right set to auto, you may be placing an error. Of course we wouldn't know though because you did not show us any code.