How do I center an SVG in a div?

2018-06-27 01:55:10

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?

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

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

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

链接地址: http://www.djcxy.com/p/75710.html

上一篇: 我如何集中浮动元素？

下一篇: 如何将SVG放在div中？