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. Does

Answer 1

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 2

I had to use

display: inline-block;

Answer 3

Flexbox is another approach: add

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

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

Answer 4

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.

Answer 5

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 6

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