356

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?

17 Answers 17

639

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.

3
  • 14
    pretty sure this also means that text-align: center on the parent element will work too (it works for me in Chrome anyway)
    – Nathan
    Jun 21, 2016 at 6:26
  • 3
    this DID NOT work for me, but using 'inline-block' instead of 'block', that did work. Maybe it was because I inserted the SVG into a td, not a div Jun 24, 2020 at 14:44
  • If this answer does not work for you, make sure you aren't using a set width: 100% on your svg element. Sep 12, 2022 at 7:55
46

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

2
  • 27
    My current approach is flexbox. Just add: .container { display: flex; justify-content: center; } And add the .container class to the div which contains your svg.
    – Esger
    Dec 6, 2018 at 19:31
  • 1
    Consider adding another answer with this new approach so I can upvote it. Thanks for your help! Jan 8, 2020 at 16:28
40

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.

2
  • thanks for this. simple and effective. been going mad for hours messing with viewPort and viewBox. this did the trick in seconds. just wrap the stupid thing in a div and center it. Dec 6, 2018 at 19:44
  • @anon58192932 — You are very welcome. It's stupidly simple, but satisfying that it's of use to others as I have benefited from so many more sophisticated answers to questions here.
    – David
    Dec 6, 2018 at 22:56
26

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%);
1
25

Flexbox is another approach: add

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

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

5
  • 2
    Unfortunately, Chrome does not like this. Safari loves this.
    – SEoF
    Sep 25, 2020 at 9:57
  • @SEoF Can you specify what Chrome does not like about this?
    – Esger
    Oct 1, 2020 at 19:32
  • Chrome doesn't display the SVG at all if you flex it within a container. Conversely, Safari doesn't display the SVG if you try to set the height to 100% of a flexed area, unless you do it after the SVG has loaded. Basically, they are a right pain and both kick up a fuss at the solution for the other. I ended up having to add the style attributes after the SVG had loaded using JS (not a good fix).
    – SEoF
    Oct 2, 2020 at 14:16
  • Works like a charm on Chrome.
    – Ali Celebi
    Dec 8, 2021 at 11:59
  • I also had to add margin: auto to the element being centred itself, to centre it vertically.
    – S..
    Aug 16, 2022 at 7:53
20

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">
0
12

I had to use

display: inline-block;
0
9

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;
 }
2
  • I think "classname" is a typo for "class". Correcting that , this worked for me (Bootrstrap5 subtheme). I don't know whether it will work with a theme not using flex. Aug 16, 2022 at 9:07
  • @FreeRadical Yeah classname is for react jsx component if you are using normal html css class would work fine Aug 17, 2022 at 11:35
7

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.

6

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.

4

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>

0
3

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

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>
1
  • You're using icon font (inline) elements – there's no svg involved at all. Dec 28, 2022 at 0:21
2

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

HTML:

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

CSS:

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

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%);
1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Ethan
    Jun 17, 2022 at 22:04
0
<div align="center">
  /* svg code */
</div>

This code center SVG in div element.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.