Question

我想创建一个灵活的网格布局（即没有像素值可以在任何地方使用）现在这是我的问题; 对于外部容器，通常我使用

#container{width:1024px;margin:0 auto}

这是使整个页面居中对齐。现在我把它转换成基于％的CSS，即

#container{width:100%;margin:0 auto}

在这种情况下，页面不居中对齐。我该如何解决这个问题？

Answer 1

页面无法集中对齐，因为它使用完整的浏览器宽度。尝试例如：“宽度：80％”，你会看到我在说什么;

Answer 2

是的，当你填满整个宽度时，你怎么能期望某些东西在中心对齐。

Answer 3

您的容器确实居中对齐。宽度100％表示容器占据父容器的所有宽度（让我们假设屏幕），因此边距空间为0 。通常，通过将边框应用于容器可以轻松跟踪此类问题。

您可以通过text-align: center;

将容器中的元素置于中心来解决此问题

Answer 4

如果我正确地理解了这个问题，你似乎需要一些东西来阻止容器无限扩展，但是当视口很窄时仍然可以灵活扩展容器。如果是这种情况，您可以在其上应用max-width告诉它何时停止扩展：

#container {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}

在这种情况下，如果视口宽度小于1024像素，则容器将具有灵活性并占用所有可用宽度，但如果窗口变宽，则不会超过1024像素（并且将居中对齐）。