带css位置的Javascript网格

我有一个大问题。我尝试创建一个插槽，并从这个插槽创建一个网格。我是这样做的：

我有class Slot.js，我在那里画了一个简单的矩形。 现在我在Main类中创建一个网格：

for(let i = 0; i <= ROW_NUM; i++)
{
    for(let j=0; j <= COL_NUM; j++)
    {
        let s = new Slot();
        let gStyle = s.graph.style;
        gStyle.left = j * SLOT_WIDTH + "px";
        gStyle.top = i * SLOT_HEIGHT + "px";
        gStyle.position = "absolute";
        g.appendChild(s.graph);


    }
}

---

for（让i=0；i简单地将类添加到绝对div的中心

HTML:

不需要JS
你的意思是我应该删除JS中的定位？（gStyle.left=j*SLOT_WIDTH+“px”；如果我这样做，那么从哪个web浏览器知道应该有50列和50行？；]如果我删除JS定位，那么网格看起来是这样的：如果我不删除JS中的定位，我得到这个：它更好，但位置错误，（不居中，就像文本对齐：右）。好的，我解决了这个问题。在我的css文件中，我有：[code]#grid{position:relative；left:0；right:0；margin left:auto；margin right:auto；}[/code]在我的js脚本中我添加了[code]let g=document.getElementById（“grid”）；g.style.width=COL#NUMS*SLOT\u width+“px”[/code]换句话说，我只是以像素为单位设置网格的宽度。
<div id="parent">
    <div class="centered-div">
    Hi i'm centered
    </div>
</div>

#parent { position: relative; }
.centered-div { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) }