带有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 的位置设置为居中。但是如果我在我的 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