带有css位置的Javascript网格

Question

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

我有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);


    }
}

所以我有一些div g，并将我的插槽添加到这个div中。现在我想将这个div的位置设置为center。但是如果我在我的style.css文件中设置了这个位置，这个div就不会设置正确的位置。网格位置始终从左上角开始。如果我设置了绝对位置，那么这个div会改变他的位置。

我怎么才能修复它？

Answer 1

只需添加类即可将绝对div居中。

HTML：

<div id="parent">
    <div class="centered-div">
    Hi i'm centered
    </div>
</div>

CSS：

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

不需要JS