html - 将 div 定位在每个窗口宽度的容器中心

Question

我想将一项设计功能添加到我的网站中。我有一个包含用户信息的容器。该容器包含动态创建的 div，这意味着在每个用户帐户中，div 的数量都会发生变化。我的主要目标是添加响应式样式，以便我的容器在每个设备宽度上都包含完全相同数量的 div，位于中心。

问题

问题出在 div 的水平对齐上。查看下一张图片:

如果我们有 768px 的宽度，那么界面看起来像预期的那样

如果我们将窗口大小调整为例如。 850px 宽度则结果如下:

您会看到 div 没有位于屏幕中央，因此会创建一个空白区域。此外，如果我们有适当的空间在行中容纳多一个 div，它应该会出现多一个 div 作为页面宽度的扩展。现在认为可能有很多行，而不仅仅是一两行。每列都应将元素放置在同一位置。

我知道我的解释不是最好的，所以如果您有任何问题，请提出。

如何修复 css 规则以在不同的窗口宽度中显示我的 div？

我的 CSS 文件如下:

/* CONTAINER */
.seas {
    margin-right: auto;
    margin-left: auto;
}

/* THE INNER BOXES DIVS */
.sea {
    min-width: 250px;
    min-height: 300px;
    display: inline-block;
    margin-top: 20px;
    margin-right: 10px;
}

@media screen and (max-width: 980px) {
    .sea {
        margin-left: 20px;
    }
}


@media screen and (max-width: 800px) {
    .sea {
        margin-left: 50px;
    }
}

@media screen and (max-width: 360px) {
    .sea {
        margin-left: 20px;
    }
}


@media screen and (max-width: 320px) {
    .sea {
        margin-left: 5px;
    }
}

html文件

 <div class="seas" id="seas">
      <div class="sea homeWindow"> </div>
      <div class="sea homeWindow"> </div>
      <div class="sea homeWindow"> </div>
 <div>

更新-(不)可能重复-

要回答重复标签，这个问题不是重复的。如果您认为是，我理解，因为我的问题指的是比这里的大多数问题更先进的网页设计风格。我自己很难描述我想要什么。不管怎样，我自己找到了解决方案，感谢发布了答案。

Answer 1

因此，根据我们的谈话，我添加了一个流体设计解决方案，您可以在这里查看

http://jsbin.com/rohoqolapa/1/edit?output

您需要的所有 CSS 都在后面

/* CONTAINER */
.seas {
    margin-right: auto;
    margin-left: auto;
}

/* THE INNER BOXES DIVS */
.sea {
    min-width: 250px;
    min-height: 300px;
    display: inline-block;
    margin-top: 20px;
    margin-right: 10px;
    background: red;
    box-sizing: border-box;
    width: 33.33%;
}

编辑: - 由于不需要更改宽度并且内容需要居中对齐，基本上这可能是解决方案

http://jsbin.com/hapeqerosi/1/edit?output

你所要做的就是改变 parent 的CSS -

.seas {
    text-align: center;
}

你的父 div .seas 实际上是 block 级元素，所以你应该将它的所有子元素居中对齐。