使用JavaScript将流体布局中的多个div居中

我试图在容器div的中心对齐多个div。我使用模函数计算页面左侧所需的填充。下面是我正在使用的JavaScript：

JavaScript

window.addEventListener（“resize”，winResize，false）；
变量宽度、左键盘、空格、方框宽度；
winResize（）；
函数winResize（）{
宽度=document.getElementById（'body'）.offsetWidth；
箱宽=350+10+10；
空间=宽度%boxWidth；
document.getElementById（'a'）.innerHTML=width+'..'+'空格；
leftPad=空间/2；
document.getElementById（'container'）.style.paddingLeft=leftPad+'px'；
document.getElementById（'container'）.style.width-=leftPad；
};

HTML如下所示：

以及CSS：

#容器{
宽度：100%；
浮动：左；
}
#货柜组{
宽度：350px；
高度：350px；
背景色：4e4e；
浮动：左；
利润率：10px；
}

---

我的问题是这段代码，左边的填充将container div推到右边，这使得页面比窗口宽。我尝试过从容器的宽度中删除填充（在winResize函数的底线中），但这似乎没有任何作用。有没有办法用CSS填充/边距来删除这个“多余的div”

我能感觉到的是，您正试图使容器看起来位于页面的中心，js不需要这样做，而且不希望使用js在页面中定位静态元素

这里是你应该使用的css，使它成为中心和流体

 #container {
    width: 100%;
    text-align:center;
 }

 #container .block {
    width: 350px;
    height: 350px;    
    background-color: #4e4e4e;
    display:inline-block;
    margin: 10px;
 }

---

此外，您还可以看到以下内容：

我想知道您是否有任何理由希望将html元素置于中心位置

这是一项CSS工作，CSS在这方面做得非常好

如果您想将div居中，可以使用

margin:0 auto在.block上。
这将使布局居中，并保持元素块水平

您的css如下所示：

#container {
    width: 100%; /*Remove the float, it's not needed. Elements align top-left standard.*/
}

#container div.block {
    width: 350px; /*Makes it possible for margin to center the box*/
    height: 350px; 
    background: #4e4e4e; /*background is the shorthand version*/
    margin: 10px auto; /*10px to keep your margin, auto to center it.*/
}

这将解决您的问题，并使您的页面加载更快，因为没有JS。此外，由于JS被禁用，布局永远不会被“禁用”

希望这有帮助，如果它没有忘记投票/接受答案的话

&短跑；希德
哇，我真的想得太多了！谢谢，我不明白似乎不喜欢将内容放在div中，添加内容必须通过javascript完成，但将内容放在中心不应涉及jsI，如果我有代表参与此帐户，并且如果你将内容放在div中时没有出错，请将内容放在div中？那里发生了什么，很奇怪。