如何将 SVG 居中放在 div 中？

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

以上答案对我不起作用。不过，将属性 preserveAspectRatio="xMidYMin" 添加到 <svg> 标记就可以了。需要指定 viewBox 属性才能使其正常工作。来源：Mozilla developer network

在阅读了上面默认情况下 svg 是内联的之后，我刚刚在 div 中添加了以下内容：

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

它对我有用。

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

这些答案都不适合我。我就是这样做的。

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

上面的答案看起来不完整，因为他们只是从 css 的角度来讨论。

视口中 svg 的定位受两个 svg 属性影响

viewBox：定义svg要覆盖的矩形区域。 preserveAspectRatio：定义了 viewBox wrt viewport 的放置位置以及如果 viewport 发生变化如何拉伸它。

Follow this link from codepen for detailed description

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

Flexbox 是另一种方法：添加

.container { 显示：弹性；证明内容：中心； }

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

我不得不使用

display: inline-block;

只需将容器视为 flex 并通过 flex 属性将 svg 项居中：

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

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

确保您的 CSS 内容为：

margin: 0 auto;

即使您说您将左右设置为自动，您也可能会出错。当然我们不会知道，因为您没有向我们展示任何代码。

你也可以这样做：

将这两行放在您指定的 style.css 类中的 div 中。

   display: block;
   margin: auto;

然后尝试运行它，您将能够看到 svg 现在居中对齐。

如果您使用 bootstrap，请将您的代码放在此 div 之间：

  <div class="text-center ">
  <i class="fa fa-twitter" style="font-size:36px "></i>
  <i class="fa fa-pinterest" style="font-size:36px"></i>
  <i class="fa fa-dribbble" style="font-size:36px"></i>
  <i class="fa fa-instagram" style="font-size:36px"></i>
  </div>

以上答案都不适合我。如果 SVG 来自 Google Icons，请尝试以下操作：

display: inline-block;
width: 24px;
vertical-align: middle;

对我来说，解决方法是将 margin: 0 auto; 添加到包含 <svg> 的元素上。

像这样：

<div style="margin: 0 auto">
   <svg ...</svg>
</div>

HTML：

<div class="wrap-center">
    <svg width="20px" height="20px"></svg>
</div>

CSS：

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

感谢您的回答，但只是补充一下，您可以使用 px 而不是 %

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