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

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

有人知道误差是多少吗?

当前回答

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

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

其他回答

Flexbox是另一种方法:添加

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

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

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

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

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

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

HTML:

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

CSS:

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

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

推荐文章