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

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

有人知道误差是多少吗?

当前回答

只需将容器视为flex，并将svg项以flex属性居中即可:

<div classname='icon'>
  <svg>.....</svg>
</div>

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

其他回答

这些答案对我都没用。我是这么做的。

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

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

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

只需将容器视为flex，并将svg项以flex属性居中即可:

<div classname='icon'>
  <svg>.....</svg>
</div>

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

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

SVG默认是内联的。

添加display: block到它，然后margin: auto将按预期工作。

或者根据你的布局，你可能想保持SVG内联，并在父元素上设置text-align: center。

作为另一种选择，您可以使用flex或网格布局将SVG居中在父元素上。

推荐文章