将SVG置于DIV中心

我想把SVG放在div里面.当它处于类似"html"的代码形式时,这不是以SVG为中心的正确方法吗？(不确定它叫什么.)

我知道我正在瞄准我的sass正如fill: red工作一样.

如果您需要查看更多我的代码,请告知并告诉我,谢谢您的时间!

制作div position:relative和svgposition:absolute

对于svg给它top:(calc 50% - 24px)和left:(50% - 24px)

这是包含div的高度的50%减去svg的高度的一半和包含div的宽度的50%减去svg的宽度的一半.一个position:absolute元素(即SVG)的边界是它的position:relative母公司(即包含.foo)边界.

SNIPPET

.svg {
  display: block;
  margin: 0 auto;
  position: absolute;
  top: calc(50% - 24px);
  left: calc(50% - 24px);
}
.foo {
  height: 150px;
  width: 150px;
  position: relative;
  border-radius: 50%;
  border: 20px solid brown;
  background: black;
}