Html div容器中的垂直中心svg

您能帮助我理解为什么svg拒绝调整高度以帮助我在div容器中垂直居中吗

如何处理容器中的垂直svg对齐？我觉得svg的行为不像div那样标准

其主要思想是将svg水平和垂直居中放置到一个div中

我试试这个：

#svg容器
{
背景色：红色；
}
#svg-1
{
保证金：自动；
显示：块；
身高：30%；
}

html，正文{
身高：100%；
}
#svg容器
{
显示器：flex；
对齐项目：居中；
背景色：红色；
身高：100%；
}
#svg-1
{
保证金：0自动；
显示：块；
}

html，正文{
身高：100%；
}
#svg容器{
背景色：红色；
身高：100%；
}
#svg-1{
显示：块；
保证金：自动；
身高：100%；
}

此代码有效，但为什么设置

显示：块

会使SVG垂直对齐？

显示：块

+将边距左+右设置为

自动

水平对齐，这是

对齐项目：中心

这样做垂直您也可以删除

#svg-1

的所有样式，并将

justify centent:center

添加到

#svg容器中以获得相同的结果
<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%;
}