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

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

有人知道误差是多少吗?

当前回答

<div align="center">
  /* svg code */
</div>

这个代码中心SVG在div元素。

其他回答

我必须使用

display: inline-block;

读了上面的内容，svg默认是内联的，我只是在div中添加了以下内容:

<div style="text-align:center;">

这招对我很管用。

纯粹主义者可能不喜欢它(这是一张图片，不是文本)，但在我看来，HTML和CSS在居中位置上搞砸了，所以我认为这是合理的。

<div align="center">
  /* svg code */
</div>

这个代码中心SVG在div元素。

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

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

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

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

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

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

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

推荐文章