我如何居中一个SVG在一个div?

我有一个SVG，我试图在一个div居中。div的宽度为900px。SVG的宽度为400px。SVG的左边距和右边距设置为auto。不起作用，它就像左距为0一样(默认值)。

有人知道误差是多少吗?

当前回答

HTML:

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

CSS:

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

其他回答

对我来说，修正是添加边际:0 auto;到包含<svg>. xml的元素上。

是这样的:

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

上面的答案对我都没用。如果SVG来自谷歌图标，请尝试以下方法:

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

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

SVG在视口中的定位受到两个SVG属性的影响

viewBox:定义svg要覆盖的矩形区域。 preserveAspectRatio:定义在哪里放置viewBox wrt视口，以及如何在视口改变时拉伸它。

点击这个来自codepen的链接了解详细描述

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

我必须使用

display: inline-block;

Flexbox是另一种方法:添加

.container { 显示:flex; justify-content:中心; ｝

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

推荐文章