如何将Svg Circle放在页面中间

<div id="circle-container"></div>

#circle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 设置容器高度为视口高度，使其占满整个屏幕 */
}

// 使用JavaScript创建Svg Circle
var svgCircle = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgCircle.setAttribute("width", "200");
svgCircle.setAttribute("height", "200");

var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", "100");
circle.setAttribute("cy", "100");
circle.setAttribute("r", "50");
circle.setAttribute("fill", "blue");

svgCircle.appendChild(circle);

// 将Svg Circle添加到容器中
var container = document.getElementById("circle-container");
container.appendChild(svgCircle);