如何使用 CSS 将 SVG 置于 Div 容器的中心？

使用 CSS 将 SVG 在 Div 容器中居中

尝试将 SVG 在 div 中居中时，如果 div 和 SVG 可能会遇到困难尽管将边距设置为“自动”，但其宽度却有所不同。

理解问题：

SVG 默认情况下呈现为内联元素。这意味着它们的行为类似于文本，因此设置“margin: auto”仅影响左右边距。在您的情况下，默认的左边距为零不受影响，从而导致与中心的偏移。

解决方案：

1. 设置显示：块：

通过在 CSS 中添加“display: block”将 SVG 转换为块元素。这将允许“margin: auto”将 SVG 在 div 内水平居中。

示例：

svg {
  display: block;
  margin: auto;
}

2. 使用文本对齐：居中：

将 SVG 保留为内联元素，并在父 div 上设置“text-align: center”。这会将所有内联元素（包括 SVG）与 div 中心对齐。

示例：

div {
  text-align: center;
}

svg {
  margin: 0 auto;
}

3. Flex 或网格布局：

或者，利用 Flex 或网格布局将 SVG 在父元素内居中：

Flexbox:

.container {
  display: flex;
  justify-content: center;
}

svg {
  margin: auto;
}

网格：

.container {
  display: grid;
  justify-content: center;
}

svg {
  grid-column: 1;
}

以上是如何使用 CSS 将 SVG 置于 Div 容器的中心？的详细内容。更多信息请关注PHP中文网其他相关文章！