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

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

有人知道误差是多少吗?

当前回答

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

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

其他回答

我必须使用

display: inline-block;

以上答案对我不起作用。将属性preserveAspectRatio="xMidYMin"添加到<svg>标记中就可以了。viewBox属性也需要被指定才能正常工作。来源:Mozilla开发者网络

谢谢你的回答，但只是补充你可以使用px而不是%

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

确保你的CSS如下:

margin: 0 auto;

即使您说您已经将左和右设置为auto，您可能会放置一个错误。当然我们不知道，因为你没有给我们看任何代码。

把这两行放到style.css中在指定的div类中。

   display: block;
   margin: auto;

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

推荐文章