我有一个SVG，我试图在一个div居中。div的宽度为900px。SVG的宽度为400px。SVG的左边距和右边距设置为auto。不起作用，它就像左距为0一样(默认值)。
有人知道误差是多少吗?
当前回答
以上答案对我不起作用。 将属性preserveAspectRatio="xMidYMin"添加到<svg>标记中就可以了。viewBox属性也需要被指定才能正常工作。 来源:Mozilla开发者网络
其他回答
这些答案对我都没用。我是这么做的。
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
上面的答案看起来不完整，因为他们只是从css的角度谈论。
SVG在视口中的定位受到两个SVG属性的影响
viewBox:定义svg要覆盖的矩形区域。 preserveAspectRatio:定义在哪里放置viewBox wrt视口，以及如何在视口改变时拉伸它。
点击这个来自codepen的链接了解详细描述
<svg viewBox="70 160 800 190" preserveAspectRatio="xMaxYMax meet">
以上答案对我不起作用。 将属性preserveAspectRatio="xMidYMin"添加到<svg>标记中就可以了。viewBox属性也需要被指定才能正常工作。 来源:Mozilla开发者网络
我必须使用
display: inline-block;
SVG默认是内联的。
添加display: block到它，然后margin: auto将按预期工作。
或者根据你的布局，你可能想保持SVG内联，并在父元素上设置text-align: center。
作为另一种选择，您可以使用flex或网格布局将SVG居中在父元素上。
