在 div 容器中垂直居中 SVG

Question

你能帮我理解为什么我的SVG拒绝调整高度，以帮助我在一个div容器中垂直居中吗？

如何使svg在容器中垂直对齐？我似乎发现SVG的行为不像div那样标准...

主要思路是将SVG水平和垂直居中在一个div中。

我尝试了这个：https://jsfiddle.net/gbz7rp7u/1/#&togetherjs=0n9iL62pHv

<div id="svg-container">
  <svg id="svg-1" height="50%" width="50%" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" version="1.1">
     <circle r="15" cx="350" cy="80"></circle>
  </svg>
</div>

#svg-container
{
  background-color: red;
}

#svg-1
{
  margin: auto auto;
  display: block;
  height: 30%;
}

- darkomen

Answer 1

html, body {
   height: 100%;  
}
#svg-container
{
  display: flex;
  align-items: center;
  background-color: red;
  height: 100%;
}

#svg-1
{
  margin: 0 auto;
  display: block;
}

<div id="svg-container">
  <svg id="svg-1" height="15px" width="15px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" version="1.1">
     <circle r="15" cx="15" cy="15"></circle>
  </svg>
</div>

将容器内的任何内容居中的另一种方法是使用 grid，如下所示：

#svg-container {
  display: grid;
  place-items: center;
}

- Mehrad

---

这段代码是可行的，但是为什么设置display: block会使SVG垂直对齐呢？ - bytrangle

display: block + 将左右 margin 设置为 auto 可以水平居中，而垂直居中则需要使用 align-items: center;。 - Mehrad

你可以选择移除 #svg-1 的所有样式，并在 #svg-container 中添加 justify-content: center 来获得相同的结果。 - Mehrad

在容器上添加 justify-content: center 也可以起作用。这样就不需要直接对 SVG 进行样式设置了。#svg-container { display: flex; align-items: center; justify-content: center; background-color: red; height: 100%; } - mmnoo

Answer 2

html, body {
   height: 100%;  
}

#svg-container {
  background-color: red;
  height: 100%;
}

#svg-1 {
  display: block;
  margin: auto;
  height: 100%;
}

<div id="svg-container">
  <svg id="svg-1" height="15px" width="15px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" version="1.1">
     <circle r="15" cx="15" cy="15"></circle>
  </svg>
</div>

- Anton Novik

---

这个可以运行，但是它阻止我在SVG下面放置任何东西（因为SVG占据了整个屏幕的高度）。 - Michael