如何改变圆的半径但保持模式？

Question

我在网上找到了一些代码来围绕中心圆绘制圆圈。如何在不影响布局的情况下更改较小圆圈的半径（目前所有圆圈都在移动并且不再以大圆圈为中心）。

当我更改 css 文件中的半径（宽度和高度）时会发生这种情况。改变大圆半径也会导致整组圆向右或向左移动（尽管它们保持对称）。

这是我的代码：

var div = 360 / 6;

var radius = 150;

var parentdiv = document.getElementById('parentdiv');

var offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2); //assumes parent is square

var offsetToChildCenter = 20;

var totalOffset = offsetToParentCenter - offsetToChildCenter;

for (var i = 1; i <= 6; ++i) {

  var childdiv = document.createElement('div');

  childdiv.className = 'div2';

  childdiv.style.position = 'absolute';

  var y = Math.sin((div * i) * (Math.PI / 180)) * radius;

  var x = Math.cos((div * i) * (Math.PI / 180)) * radius;

  childdiv.style.top = (y + totalOffset).toString() + "px";

  childdiv.style.left = (x + totalOffset).toString() + "px";

  parentdiv.appendChild(childdiv);

}

#parentdiv {

  position: relative;

  width: 150px;

  height: 150px;

  background-color: red;

  border-radius: 150px;

  margin: 150px;

}

.div2 {

  position: absolute;

  width: 40px;

  height: 40px;

  background-color: red;

  border-radius: 100px;

}

<div id="parentdiv"></div>

我也想将圆圈移动到屏幕的中心，但我不确定如何。

我对 html/css/js 很陌生，任何帮助将不胜感激！