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?

Spadar Shut · Accepted Answer · 2023-01-09T09:08:49.977

630

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.

edited Jan 09 '23 at 09:08

answered Dec 27 '11 at 00:01

Spadar Shut

15,111
5
47
54

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 '16 at 06:26
2

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` – mathheadinclouds Jun 24 '20 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. – code_disciple Sep 12 '22 at 07:55

score 44 · Answer 2 · edited Feb 02 '18 at 14:17

44

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

edited Feb 02 '18 at 14:17

aknuds1

65,625
67
195
317

answered May 24 '13 at 08:19

Esger

1,310
12
18

26

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 06 '18 at 19:31
1

Consider adding another answer with this new approach so I can upvote it. Thanks for your help! – Chris Peters Jan 08 '20 at 16:28

David · Answer 3 · 2018-09-14T11:58:17.133

39

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.

edited Sep 14 '18 at 11:58

answered Aug 07 '14 at 14:46

David

1,018
13
22

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. – fIwJlxSzApHEZIl Dec 06 '18 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 06 '18 at 22:56

score 26 · Answer 4 · answered Jul 10 '14 at 19:50

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

answered Jul 10 '14 at 19:50

Ryan

2,747
2
22
16

3

i don't know why, but i had to use `left: 100%` – Luís Deschamps Rudge Nov 12 '14 at 21:50

score 24 · Answer 5 · edited Jul 06 '20 at 08:13

24

Flexbox is another approach: add

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

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

edited Jul 06 '20 at 08:13

Always Helping

14,316
4
13
29

answered Jan 10 '20 at 20:14

Esger

1,310
12
18

2

Unfortunately, Chrome does not like this. Safari loves this. – SEoF Sep 25 '20 at 09:57
@SEoF Can you specify what Chrome does not like about this? – Esger Oct 01 '20 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 02 '20 at 14:16
Works like a charm on Chrome. – Ali Celebi Dec 08 '21 at 11:59
I also had to add `margin: auto` to the element being centred itself, to centre it vertically. – S.. Aug 16 '22 at 07:53

Shishir Arora · Answer 6 · 2017-09-24T00:14:54.117

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

viewBox: defines the rectangle area for svg to cover.
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">

score 12 · Answer 7 · answered Jan 26 '17 at 08:30

12

I had to use

display: inline-block;

answered Jan 26 '17 at 08:30

Joanna Schweiger

147
1
6

score 9 · Answer 8 · answered Apr 28 '21 at 10:03

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

answered Apr 28 '21 at 10:03

Arihant Jain

817
5
17

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. – Free Radical Aug 16 '22 at 09:07
@FreeRadical Yeah classname is for react jsx component if you are using normal html css class would work fine – Arihant Jain Aug 17 '22 at 11:35

score 7 · Answer 9 · answered Dec 26 '11 at 22:20

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.

answered Dec 26 '11 at 22:20

Michael Rader

5,839
8
33
43

Nachiket Gohil · Answer 10 · 2022-03-03T07:32:37.207

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.

edited Mar 03 '22 at 07:32

answered Aug 10 '20 at 12:25

Nachiket Gohil

955
11
17

Martin Lloyd Jose · Answer 11 · 2021-04-10T00:53:48.100

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>

score 3 · Answer 12 · edited Jan 02 '19 at 05:11

3

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>

edited Jan 02 '19 at 05:11

Employee

3,109
5
31
50

answered Jan 02 '19 at 00:47

Uzair Ahmad

31
2

You're using icon font (inline) elements – there's no svg involved at all. – herrstrietzel Dec 28 '22 at 00:21

score 2 · Answer 13 · answered Mar 26 '20 at 23:31

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>

answered Mar 26 '20 at 23:31

Collin Krawll

2,210
17
15

score 2 · Answer 14 · answered Jul 12 '21 at 23:53

2

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;

answered Jul 12 '21 at 23:53

Marten

645
7
21

score 2 · Answer 15 · answered Jan 19 '22 at 07:05

2

HTML:

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

CSS:

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

answered Jan 19 '22 at 07:05

Mahdyar

65
8

score 0 · Answer 16 · answered Jun 17 '22 at 04:06

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

answered Jun 17 '22 at 04:06

Ching Ching

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](/help/how-to-answer). – Ethan Jun 17 '22 at 22:04

score 0 · Answer 17 · answered Dec 23 '22 at 14:01

0

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

This code center SVG in div element.

answered Dec 23 '22 at 14:01

Seyit Bilal

191
2
16

How do I center a SVG in a div?

17 Answers17

Linked

Related