CSS 如何在一个 div 中居中一个 SVG

在本文中，我们将介绍如何使用CSS将一个SVG居中在一个div中。

阅读更多：CSS 教程

方法一：使用margin属性

使用margin属性是最简单和最常见的居中元素的方法。首先，我们需要将svg元素的display属性设置为block，以便它可以包含在一个div中。然后，我们可以使用margin-left和margin-right属性将svg水平居中，并使用margin-top和margin-bottom属性将svg垂直居中。

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

svg {
  display: block;
  margin: auto;
}

在上面的例子中，我们使用了flex布局，将div的内容水平和垂直居中，并使用margin: auto将svg元素居中。

方法二：使用position属性

另一种常见的方法是使用position属性来居中元素。我们可以将svg元素的position属性设置为absolute，并将其左右和上下的位置设置为50%，然后使用transform属性将其平移到中心位置。

div {
  position: relative;
}

svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

上面的例子中，我们将div的position属性设置为relative，这是为了确保svg相对于div进行定位。然后我们将svg的position属性设置为absolute，并使用top和left属性将其移动到50%的位置。最后，我们使用transform属性将svg相对于自身的尺寸向左和向上平移50%，以达到居中的效果。

方法三：使用flexbox布局

CSS的flexbox布局也可以很方便地实现元素的居中。我们可以将div的display属性设置为flex，并使用align-items和justify-content属性将其内容水平和垂直居中。

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

svg {
  display: block;
}

上面的例子中，我们将div的display属性设置为flex，这样它的子元素就可以使用flex布局进行定位。然后，我们使用align-items和justify-content属性将div的内容水平和垂直居中。

方法四：使用table布局

如果你需要支持更老版本的浏览器，可以考虑使用table布局来居中元素。我们可以将div的display属性设置为table，并在内部使用table-cell进行布局。

div {
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}

div > div {
  display: table-cell;
  vertical-align: middle;
}

svg {
  display: inline-block;
}

在上面的例子中，我们将div的display属性设置为table，并设置宽度和高度为100%，确保它占据整个父元素的空间。然后，我们使用display: table-cell将div内部的div元素设置为表格单元格，并使用vertical-align属性将其垂直居中。最后，我们将svg的display属性设置为inline-block，使其水平居中。

总结

本文介绍了四种常见的方法来在CSS中居中一个SVG元素。使用margin属性是最简单和最常见的方法，而使用position属性可以更精确地控制元素的位置。flexbox和table布局也是很方便的方法，其中flexbox适用于现代浏览器，而table布局适用于兼容性较差的浏览器。你可以根据自己的需要选择适合的方法来实现居中效果。