CSS 如何在 div 中居中 SVG？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8639383/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I center an SVG in a div?
提问by Don 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).
我有一个 SVG，我试图将它放在一个 div 中。div 有一个宽度或 900px。SVG 的宽度为 400 像素。SVG 的 margin-left 和 margin-right 设置为自动。不起作用，它只是表现为左边距为 0（默认）。
Anyone know my error?
有人知道我的错误吗？
回答by Spadar Shut
SVG is inline by default. Add display: blockto it and then margin: autowill work as expected.
默认情况下，SVG 是内联的。添加display: block到它，然后margin: auto将按预期工作。
回答by Esger
Above answers did not work for me.
Adding the attribute preserveAspectRatio="xMidYMin"to the <svg>tag did the trick though. The viewBoxattribute needs to be specified for this to work as well.
Source: Mozilla developer network
以上答案对我不起作用。不过，将属性添加preserveAspectRatio="xMidYMin"到<svg>标签确实有效。viewBox需要指定该属性才能正常工作。来源：Mozilla 开发者网络
回答by David
Having read above that svg is inline by default, I just added the following to the div:
阅读上面的内容后，默认情况下 svg 是内联的，我只是在 div 中添加了以下内容：
<div style="text-align:center;">
and it did the trick for me.
它对我有用。
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.
纯粹主义者可能不喜欢它（它是图像，而不是文本），但在我看来 HTML 和 CSS 在居中时搞砸了，所以我认为这是合理的。
回答by Ryan
None of these answers worked for me. This is how I did it.
这些答案都不适合我。我就是这样做的。
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
回答by Shishir Arora
Answers above look incomplete as they are talking from css point of view only.
上面的答案看起来不完整，因为它们仅从 css 的角度进行讨论。
positioning of svg within viewport is affected by two svg attributes
svg 在视口中的定位受两个 svg 属性的影响
- viewBox: defines the rectangle area for svg to cover.
- preserveAspectRatio: defined where to place the viewBox wrt viewport and how to strech it if viewport changes.
- viewBox：定义 svg 覆盖的矩形区域。
- 保留AspectRatio：定义在何处放置viewBox wrt视口以及如果视口发生变化如何拉伸它。
Follow this link from codepen for detailed description
<svg viewBox="70 160 800 190" preserveAspectRatio="xMaxYMax meet">
回答by Joanna Schweiger
I had to use
我不得不使用
display: inline-block;
回答by Michael Rader
make sure your css reads:
确保您的 css 显示：
margin: 0 auto;
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.
即使您说将左右设置为自动，您也可能会出现错误。当然，我们不会知道，因为您没有向我们展示任何代码。
回答by Martin Lloyd Jose
You can also do this:
你也可以这样做：
<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>
回答by Uzair Ahmad
Put your code in between this divif you are using bootstrap:
div如果您使用bootstrap ，请将您的代码放在这两者之间：
<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>
回答by Esger
Flexbox is another approach: add .container { display: flex; justify-content: center; }And add the .containerclass to the div which contains your svg.
Flexbox 是另一种方法：添加.container { display: flex; justify-content: center; }并将.container类添加到包含您的 svg 的 div。
