如何将SVG居中在一个div中？

Question

我有一个SVG图像，我想要将其居中在一个div中。这个div的宽度是900像素。SVG图像的宽度是400像素。SVG图像的margin-left和margin-right都设置为auto。但是不起作用，它就好像左边距是0（默认值）。

有人知道是什么错误吗？

- Don P

Answer 1

SVG默认为内联元素。

将display: block添加到它上面，然后margin: auto将按预期工作。

或者根据您的布局，您可能希望保持SVG内联，并在父元素上设置text-align: center。

作为另一种选择，您可以在父元素上使用flex或grid布局来使SVG居中。

- Spadar Shut

---

我很确定这也意味着在父元素上使用"text-align: center"同样有效（至少在我的Chrome浏览器上有效）。 - Nathan

这对我没有起作用，但是使用'inline-block'而不是'block'，那就可以了。也许是因为我将SVG插入了一个td而不是一个div。 - mathheadinclouds

如果这个答案对你不起作用，请确保你的SVG元素上没有使用set width: 100%。 - code_disciple

Answer 2

之前的回答对我没有用。 但是，向<svg>标签添加属性preserveAspectRatio="xMidYMin"就解决了问题。为了使其起作用，还需要指定viewBox属性。 来源：Mozilla开发者网络

- Esger

---

我当前采用的方法是弹性盒子布局。只需添加以下代码：.container { display: flex; justify-content: center; }然后将 .container 类添加到包含 SVG 的 <div> 元素中即可。 - Esger

考虑使用这种新方法添加另一个答案，这样我就可以点赞了。感谢您的帮助！ - Chris Peters

Answer 3

阅读以上内容后，我发现 SVG 默认是内联的，因此我只需将以下内容添加到 div 中：

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

对我来说，它起到了作用。

纯粹主义者可能不喜欢这个方法（它是图像而非文本），但在我看来，HTML和CSS在居中方面出了问题，因此我认为这是有道理的。

- David

---

谢谢这个。简单而有效。我已经疯了几个小时在调整视口和视图框。这个方法只用几秒钟就解决了问题。只需将该元素包装在一个 div 中并居中即可。 - fIwJlxSzApHEZIl

@anon58192932 — 非常欢迎。虽然很简单，但很令人满意，因为它对他人有用，就像我从这里得到了许多更复杂的答案一样。 - David

Answer 4

这些答案都对我没有用。这是我做的方法。

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

- Ryan

---

我不知道为什么，但我必须使用“left: 100%”。 - Luís Deschamps Rudge

Answer 5

Flexbox是另一种方法：添加

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

并将包含svg的div添加.container类。

- Esger

---

不幸的是，Chrome 不喜欢这个。Safari 喜欢它。 - SEoF

@SEoF 你能具体说明Chrome对此有何不喜欢的地方吗？ - Esger

如果你在容器内使用flex布局，Chrome根本不会显示SVG。相反，如果你试图将高度设置为弹性区域的100％，则Safari不会显示SVG，除非你在SVG加载后这样做。基本上，它们都很麻烦，而且两者的解决方案都会引起问题。最终我不得不使用JS在SVG加载后添加样式属性（这不是一个好的解决方法）。 - SEoF

在Chrome上运行得非常好。 - Ali Celebi

我还必须将 margin: auto 添加到要居中的元素本身，以使其垂直居中。 - S..

Answer 6

以上回答只从CSS角度进行了讨论，内容似乎有所不完整。

SVG在视窗中的定位受到两个SVG属性的影响：

1. viewBox：定义SVG覆盖的矩形区域。
2. preserveAspectRatio：定义了将viewBox放置在视口的位置以及在视口更改时如何拉伸它。

请点击此链接查看有关详细说明。

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

- Shishir Arora

Answer 7

我不得不使用

display: inline-block;

- Joanna Schweiger

Answer 8

只需要将容器视为 flex，并使用 flex 属性使 svg 项居中：

<div classname='icon'>
  <svg>.....</svg>
</div>

.icon{
  display:flex;
  align-items:center;
  justify-content:center;
 }

- Arihant Jain

---

我认为"classname"是"class"的拼写错误。更正后，这对我有用（Bootrstrap5子主题）。我不知道它是否适用于不使用flex的主题。 - Free Radical

@FreeRadical 如果你使用普通的HTML CSS，那么classname就是用于React JSX组件的。 - Arihant Jain

Answer 9

请确保你的CSS文件中有以下内容：

margin: 0 auto;

虽然你说左右都设置为自动，但可能会出现错误。当然，我们不确定，因为你没有展示任何代码。

- Michael Rader

Answer 10

将这两行代码放在指定的

类中，放在style.css文件中。

   display: block;
   margin: auto;

如果您尝试运行它，您将能够看到svg现在已经居中对齐。

- Nachiket Gohil