我有一个SVG，我试图在一个div居中。div的宽度为900px。SVG的宽度为400px。SVG的左边距和右边距设置为auto。不起作用，它就像左距为0一样(默认值)。
有人知道误差是多少吗?
当前回答
上面的答案看起来不完整，因为他们只是从css的角度谈论。
SVG在视口中的定位受到两个SVG属性的影响
viewBox:定义svg要覆盖的矩形区域。 preserveAspectRatio:定义在哪里放置viewBox wrt视口，以及如何在视口改变时拉伸它。
点击这个来自codepen的链接了解详细描述
<svg viewBox="70 160 800 190" preserveAspectRatio="xMaxYMax meet">
其他回答
谢谢你的回答，但只是补充你可以使用px而不是%
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
我必须使用
display: inline-block;
Flexbox是另一种方法:添加
.container { 显示:flex; justify-content:中心; ｝
并将.container类添加到包含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;
}
如果你使用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>
