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

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