我正在尝试创建一个响应站点（调整浏览器窗口的大小以查看更改），但是无法将这些方格div居中。
http://arunmahendrakar.com/ktw/play.html
div是动态创建的，并附加到四个“容器” div（＃topLeft，＃topRight，＃bottomLeft和#bottomRight）之一。
我尝试使用margin-left：auto;和margin-right：自动处理各种元素，但这没有帮助。
请帮助我＃topLeft，＃topRight，＃bottomLeft和#bottomRight div水平居中。我更喜欢纯CSS解决方案，但如果它不可行，那么我也可以通过js进行调整。
最佳答案
有许多不同的方法可以完成此操作，并且可以对构建该结构的方式进行一些调整。这是我要做的：
首先，按正常大小调整大小；使象限（例如，#topLeft）为width: 100%，使各个正方形尺寸为padding: 5%。这将为正方形提供与当前相同的大小，但是100％的宽度可确保将物件实际居中放置在您想要的位置。在200％时，一个象限的“中心”将偏离50％。
接下来，不要在方块上使用float和clear。这将使它们全部一起运行。您的Javascript可以通过在每5个方格后插入display: inline-block来手动将其分解。完成此操作后，您将不再需要添加<br>类。
此时，您应该几乎完全拥有所需的内容。但是，每排正方形之间会有一些额外的间距。这是由于HTML中的空白所致，而要摆脱它，只需设置确保象限（例如，再次clearBoth）已设置#topLeft。
那应该做到的！
说明
这真的很简单：font-size: 0遵循文本对齐。通过使用display: inline-block元素而不是浮点数创建棋盘，您只需更改inline-block即可控制它们对齐的一侧。
其他所有东西只是使该技术正常工作所需的一些必要的清理工作。
关于javascript - topLeft，topRight，bottomLeft和bottomRight id的居中内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16312598/