如何将SVG放在div中？

我有一个SVG，我试图以div为中心。 该div有一个宽度或900px。 SVG的宽度为400px。 SVG将margin-left和margin-right设置为auto。 不起作用，只是左边距为0（默认）。

有人知道我的错误？

Answer 1

SVG默认是内联的。 添加display: block ，然后margin: auto将按预期工作。

Answer 2

以上的答案不适合我。 虽然将属性preserveAspectRatio="xMidYMin"到<svg>标记中， 需要指定viewbox属性才能使其工作。 来源： Mozilla开发者networking

Answer 3

这些答案都没有为我工作。 我就是这么做的

 position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); 

Answer 4

阅读上面的SVG是默认内联，我刚刚添加到div的以下内容：

 <div style="text-align:center;"> 

它为我做了诡计。

纯粹主义者可能不喜欢它（这是一个图像，而不是文本），但在我看来，HTML和CSS搞砸了，所以我认为这是合理的。

Answer 5

上面的答案看起来不完整，因为他们只是从css的angular度来讲话。

svg在视口中的位置受到两个svg属性的影响

1. viewBox：定义要覆盖的svg的矩形区域。
2. preserveAspectRatio：定义放置viewBox和视口的位置，以及如果视口更改，如何拉伸视口。

请从codepen中查看此链接以获取详细说明

 <svg viewBox="70 160 800 190" preserveAspectRatio="xMaxYMax meet"> 

Answer 6

确保你的CSS读取：

 margin: 0 auto; 

即使你说你有左右两边设置为自动，你可能会发生错误。 当然，我们不知道，因为你没有给我们任何代码。

Answer 7

我不得不使用

 display: inline-block;