如何将 SVG 居中放在 div 中？答案

【问题标题】：How do I center an SVG in a div?如何将 SVG 居中放在 div 中？
【发布时间】：2012-01-28 04:34:21
【问题描述】：

我有一个 SVG，我试图将其置于 div 中。 div 的宽度为 900 像素。 SVG 的宽度为 400 像素。 SVG 的 margin-left 和 margin-right 设置为 auto。不起作用，它就像左边距为 0（默认）一样。

有人知道我的错误吗？

【问题讨论】：

标签： css layout svg positioning margin

【解决方案1】：

HTML：

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

CSS：

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

【讨论】：

【解决方案2】：

以上答案都不适合我。如果 SVG 来自 Google Icons，试试这个：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

您也可以这样做：

  <center>
    <div style="width: 40px; height: 40px;">
        <svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
            <use class="sqs-use--icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-icon">
                <svg id="twitter-icon" viewBox="0 0 64 64" width="100%" height="100%">
                    <path
                        d="M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z"
                        />
                </svg>
            </use>
        </svg>
    </div>
  </center>

【讨论】：

【解决方案5】：

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

   display: block;
   margin: auto;

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

【讨论】：

【解决方案6】：

Flexbox 是另一种方法：添加

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

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

【讨论】：

很遗憾，Chrome 不喜欢这样。 Safari 喜欢这个。
@SEoF 你能指定 Chrome 不喜欢这个吗？
如果您在容器中弯曲它，Chrome 根本不会显示 SVG。相反，如果您尝试将高度设置为弯曲区域的 100%，则 Safari 不会显示 SVG，除非您在 SVG 加载后执行此操作。基本上，他们是正确的痛苦，并且都为对方的解决方案大惊小怪。在使用 JS 加载 SVG 后，我最终不得不添加样式属性（不是一个好的修复）。
在 Chrome 上像魅力一样工作。

【解决方案7】：

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

像这样：

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

【讨论】：

【解决方案8】：

如果您使用 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>

【讨论】：

【解决方案9】：

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

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

它对我有用。

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

【讨论】：

感谢您。简单有效。几个小时以来一直在搞乱 viewPort 和 viewBox。这在几秒钟内就成功了。只需将愚蠢的东西包裹在一个 div 中并居中即可。
@anon58192932 — 非常欢迎您。它非常简单，但令人满意的是它对其他人有用，因为我从这里对问题的许多更复杂的答案中受益。

【解决方案10】：

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

【讨论】：

我目前的方法是 flexbox。只需添加：.container { display: flex; justify-content: center; } 并将 .container 类添加到包含您的 svg 的 div 中。
考虑用这种新方法添加另一个答案，这样我就可以投票了。感谢您的帮助！

【解决方案11】：

上面的答案看起来不完整，因为他们只是从 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">

【讨论】：

【解决方案12】：

我不得不使用

display: inline-block;

【讨论】：

【解决方案13】：

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

【讨论】：

很确定这也意味着父元素上的 text-align: center 也可以工作（无论如何它在 Chrome 中对我有用）
这对我不起作用，但使用 'inline-block' 而不是 'block' 确实有效。也许是因为我将 SVG 插入到 td，而不是 div

【解决方案14】：

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

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

【讨论】：

我不知道为什么，但我不得不使用left: 100%

【解决方案15】：

确保您的 css 内容为：

margin: 0 auto;

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

【讨论】：