Javascript 上左、上右、下左和下右ID的居中内容

我正在尝试创建一个响应站点（调整浏览器窗口的大小以查看更改），但我无法将这些方格图案的div居中

div是动态创建的，并附加到四个“container”div中的一个（#topLeft、#topRight、#bottomLeft和#bottomRight）

我试过使用左边距：自动；右边距：在各种元素上自动，但这并没有帮助

---

请帮我将#左上角、#右上角、#左下角和#右下角div水平居中。我更喜欢纯CSS解决方案，但如果它无法实现，我也可以使用js调整。

有很多不同的方法可以实现这一点，对构建该结构的方式进行一些调整。下面是我要做的：

首先，让事情变得更正常一点；制作象限（

#左上

例如）

宽度：100%

和单个正方形大小

填充：5%

。这将使正方形具有与当前相同的大小，但100%的宽度可确保物体实际位于您希望它们位于的中心位置。在200%时，象限的“中心”将偏离50%

接下来，在方块上使用

display:inline block

，而不是使用

float

和

clear

。这将使它们一起在一条线上运行；Javascript可以通过在每5个方块后插入一个

来手动分解它们。完成此操作后，您将不再需要添加

clearleath

类

在这一点上，你应该几乎完全得到你想要的。然而，每排正方形之间会有一些额外的间距。这是由于HTML中存在空白，要消除空白，只需设置确保象限（例如，

#topLeft

）已设置

字体大小：0

应该这样做

解释

它非常简单：

display:inlineblock

遵循文本对齐。通过使用

内联块

元素而不是浮动来创建棋盘，您可以通过更改

文本对齐

来控制它们对齐到哪一侧

---

所有其他的东西只是一些必要的清理工作，以使这项技术很好地工作。

只是为了确认一下，你希望每个棋盘都在各自的容器中居中？你一定是个天才！只是那些快速的变化和中提琴。。。它就像一个符咒。非常感谢你。