blocks|key|480688|text|默认情况下，SVG是内联的。将display:+block添加到其中，然后margin:+auto将按预期工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|480689|entityMap^0|F|E|11|C|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>SVG is inline by default. Add <code>display: block</code> to it and then <code>margin: auto</code> will work as expected.</p>


blocks|key|696641|text|上面的答案对我不起作用。不过，将属性preserveAspectRatio="xMidYMin"添加到<svg>标记中确实起到了作用。需要指定viewBox属性才能使其正常工作。来源：Mozilla+developer+network|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|696642|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/SVG/Attribute/preserveAspectRatio^0|I|U|1F|5|1Z|7|2K|P|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@$9|U|A|V|1|W]]|E|$]]|$1|F|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>Above answers did not work for me.
Adding the attribute <code>preserveAspectRatio="xMidYMin"</code> to the <code>&lt;svg&gt;</code> tag did the trick though. The <code>viewBox</code> attribute needs to be specified for this to work as well.
Source: <a href="https://developer.mozilla.org/en-US/docs/SVG/Attribute/preserveAspectRatio" rel="noreferrer">Mozilla developer network</a></p>


blocks|key|480823|text|在上面读到svg在默认情况下是内联的之后，我在div中添加了以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|480824|<div+style="text-align:center;">|code-block|syntax|javascript|480825|它帮了我大忙。|480826|纯粹主义者可能不喜欢它(它是一个图像，而不是文本)，但在我看来，HTML和CSS在居中方面搞得一团糟，所以我认为这是合理的。|480827|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Having read above that svg is inline by default, I just added the following to the div:</p>

<pre><code>&lt;div style="text-align:center;"&gt;
</code></pre>

<p>and it did the trick for me. </p>

<p>Purists may not like it (it’s an image, not text) but in my opinion HTML and CSS screwed up over centring, so I think it’s justified.</p>


blocks|key|696666|text|这些答案对我来说都不起作用。我就是这么做的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|696667|position:+relative;
left:+50%25;
-webkit-transform:+translateX(-50%25);
-ms-transform:+translateX(-50%25);
transform:+translateX(-50%25);|code-block|syntax|javascript|696668|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>None of these answers worked for me. This is how I did it.</p>

<pre><code>position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
</code></pre>


blocks|key|696804|text|Flexbox是另一种方法:添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|696805|​|696806|.container+{
++display:+flex;
++justify-content:+center;
}|code-block|syntax|javascript|696807|696808|并将.container类添加到包含svg的div中。|offset|length|style|CODE|696809|entityMap^0|0|0|0|0|2|A|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|V|8|@$L|W|M|X|N|O]]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>Flexbox is another approach: add</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
  display: flex;
  justify-content: center;
}</code></pre>
</div>
</div>
</p>
<p>And add the <code>.container</code> class to the div which contains your svg.</p>


blocks|key|480839|text|我不得不用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|480840|display:+inline-block;|code-block|syntax|javascript|480841|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I had to use</p>

<pre><code>display: inline-block;
</code></pre>


blocks|key|480624|text|确保您的css为：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|480625|margin:+0+auto;|code-block|syntax|javascript|480626|即使您说您已将left和right设置为auto，但您可能放置了一个错误。当然我们不会知道，因为您没有向我们展示任何代码。|480627|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>make sure your css reads:</p>

<pre><code>margin: 0 auto;
</code></pre>

<p>Even though you're saying you have the left and right set to auto, you may be placing an error. Of course we wouldn't know though because you did not show us any code.</p>


blocks|key|696749|text|您还可以执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|696750|​|696751|++<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%25"+height="100%25">
++++++++++++++++++++<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>|code-block|syntax|javascript|696752|696753|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>You can also do this:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;center&gt;
    &lt;div style="width: 40px; height: 40px;"&gt;
        &lt;svg class="sqs-svg-icon--social" viewBox="0 0 64 64"&gt;
            &lt;use class="sqs-use--icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-icon"&gt;
                &lt;svg id="twitter-icon" viewBox="0 0 64 64" width="100%" height="100%"&gt;
                    &lt;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"
                        /&gt;
                &lt;/svg&gt;
            &lt;/use&gt;
        &lt;/svg&gt;
    &lt;/div&gt;
  &lt;/center&gt;</code></pre>
</div>
</div>
</p>


blocks|key|480978|text|只需将容器视为flex，并通过flex属性将svg项居中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|480979|<div+classname='icon'>
++<svg>.....</svg>
</div>

.icon{
++display:flex;
++align-items:center;
++justify-content:center;
+}|code-block|syntax|javascript|480980|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Just treat the container as flex and center the svg item by flex properties:</p>
<pre><code>&lt;div classname='icon'&gt;
  &lt;svg&gt;.....&lt;/svg&gt;
&lt;/div&gt;

.icon{
  display:flex;
  align-items:center;
  justify-content:center;
 }
</code></pre>


blocks|key|696842|text|对我来说，修复方法是在包含<svg>的元素上添加margin:+0+auto;。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|696843|如下所示：|696844|<div+style="margin:+0+auto">
+++<svg+...</svg>
</div>|code-block|syntax|javascript|696845|entityMap^0|D|5|O|F|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>For me, the fix was to add <code>margin: 0 auto;</code> onto the element containing the <code>&lt;svg&gt;</code>.</p>

<p>Like this:</p>

<pre><code>&lt;div style="margin: 0 auto"&gt;
   &lt;svg ...&lt;/svg&gt;
&lt;/div&gt;
</code></pre>


blocks|key|696917|text|上面的答案对我来说都不起作用。如果SVG来自Google+Icons，请尝试以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|696918|display:+inline-block;
width:+24px;
vertical-align:+middle;|code-block|syntax|javascript|696919|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>None of the above answers worked for me. If the SVG is from Google Icons try this:</p>
<pre><code>display: inline-block;
width: 24px;
vertical-align: middle;
</code></pre>


blocks|key|481050|text|HTML：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|481051|<div+class="wrap-center">
++++<svg+width="20px"+height="20px"></svg>
</div>|code-block|syntax|javascript|481052|CSS：|481053|.wrap-center+{
++++display:+flex;
++++justify-content:+center;
++++align-items:+center;
}|481054|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>HTML:</p>
<pre><code>&lt;div class=&quot;wrap-center&quot;&gt;
    &lt;svg width=&quot;20px&quot; height=&quot;20px&quot;&gt;&lt;/svg&gt;
&lt;/div&gt;
</code></pre>
<p>CSS:</p>
<pre><code>.wrap-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
</code></pre>


<p>I have an SVG that I am trying to center in a div. The div has a width or 900px. The SVG has a width of 400px. The SVG has its margin-left and margin-right set to auto. Doesn't work, it just acts as if the left margin is 0 (default).</p>

<p>Anyone know my error?</p>


How do I center an SVG in a div?

容器

我有一个SVG，我正试图将它放在一个div中。div的宽度为900px。SVG的宽度为400px。SVG的左边界和右边界设置为auto。不起作用，它只是表现得好像左边距是0(默认)。有人知道我的错误吗？

问如何在div中将SVG居中？
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在div中将SVG居中？EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在div中将SVG居中？
EN