我正在尝试创建一个自适应网站（调整浏览器窗口大小以查看更改），但我无法将这些方格的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调整。
答案 0 :(得分：1)
通过对构建该结构的方式进行一些调整，有很多不同的方法可以做到这一点。这就是我要做的事情：
首先，更正常地调整尺寸;制作象限（例如#topLeft）width: 100%和各个方块尺寸padding: 5%。这将使方块具有与当前相同的大小，但100％宽度可确保事物实际上居中于您希望的位置。在200％时，象限的“中心”将下降50％。
接下来，不要使用float和clear，而是在广场上使用display: inline-block。这将使它们全部在一条线上运行;您的Javascript可以通过在每5个方格后插入<br>来手动分解它们。完成此操作后，您将不再需要添加clearBoth课程。
此时，您应该几乎完全符合您的要求。但是，每行正方形之间会有一些额外的间距。这是由于HTML中的空格，为了摆脱它，只需设置确保象限（例如#topLeft）设置font-size: 0。
应该这样做！
<强>解释
这非常简单：display: inline-block服从文本对齐。通过使用inline-block元素而不是浮点数创建棋盘格，只需更改text-align即可控制它们与哪一方对齐。
所有其他的东西只是一些必要的清理工作，以使这项技术很好地工作。