How do I center an SVG in a div

Question

I have an SVG that I am trying to center in a div  The div has a width or 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    Anyone know my error

User · Answer

Above answers did not work for me  Adding the attribute preserveAspectRatio  xMidYMin  to the  lt svg gt  tag did the trick though  The viewBox attribute needs to be specified for this to work as well  Source  Mozilla developer network

User · Answer

For me  the fix was to add margin  0 auto  onto the element containing the  lt svg gt    Like this    lt div style  margin  0 auto  gt      lt svg     lt  svg gt   lt  div gt

User · Answer

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

User · Answer

Put your code in between this div if you are using bootstrap      lt div class  text-center   gt     lt i class  fa fa-twitter  style  font-size 36px   gt  lt  i gt     lt i class  fa fa-pinterest  style  font-size 36px  gt  lt  i gt     lt i class  fa fa-dribbble  style  font-size 36px  gt  lt  i gt     lt i class  fa fa-instagram  style  font-size 36px  gt  lt  i gt     lt  div gt

User · Answer

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

User · Answer

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

User · Answer

I had to use  display  inline-block

User · Answer

You can also do this    lt center gt   lt div style  width  40px  height  40px   gt       lt svg class  sqs-svg-icon--social  viewBox  0 0 64 64  gt           lt use class  sqs-use--icon  xmlns xlink  http   www w3 org 1999 xlink  xlink href   twitter-icon  gt               lt svg id  twitter-icon  viewBox  0 0 64 64  width  100   height  100   gt                   lt 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                        gt               lt  svg gt           lt  use gt       lt  svg gt   lt  div gt   lt  center gt

User · Answer

Having read above that svg is inline by default  I just added the following to the div    lt div style  text-align center   gt    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

User · Answer

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   lt svg viewBox  70 160 800 190  preserveAspectRatio  xMaxYMax meet  gt

User · Answer

Flexbox is another approach  add  x000D   x000D   container     display  flex    justify-content  center    x000D   x000D   x000D   And add the  container class to the div which contains your svg

User · Answer

Put this 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 aligned in the center

[css] How do I center an SVG in a div?

Examples related to css

Examples related to layout

Examples related to svg

Examples related to positioning

Examples related to margin