居中Divs网格(动态生成)

我已经尝试过来自SO和其他来源的每一个技巧,但对于我的生活,我无法将这个盒子网格放在中心位置。 我试图让整个网格在页面上居中。

这是一个小问题(将预览面板向左拖动一下,这样你就得到至少两列。): http : //jsfiddle.net/valgaze/0w77ccvj/1/

框的网格是内联块。 通过施加利润来实现这一目标是一种愚蠢的方式,但由于种种原因这是不可取的。 必须有一些我缺少的东西,我将不得不提出任何见解!

这是一个简化版本:

#gridArea{ background-color:#FFF300; display: -moz-inline-stack; display: inline-block; border-style: dotted; border-width: 1px; margin: 0 auto; } .wrap{ text-align: center; } .card{ background:#000; padding:19px 16px; float:left; margin-right: 10px; margin-bottom: 18px; width:350px; height:100px; display: inline; text-align: center; } 
  
HERE'S DATA
HERE'S DATA
HERE'S DATA
HERE'S DATA
HERE'S DATA
HERE'S DATA
HERE'S DATA
HERE'S DATA
HERE'S DATA
HERE'S DATA
HERE'S DATA
HERE'S DATA
HERE'S DATA
HERE'S DATA
HERE'S DATA
HERE'S DATA
HERE'S DATA
HERE'S DATA
HERE'S DATA
HERE'S DATA
HERE'S DATA
HERE'S DATA

看起来你需要以下内容:

  #gridArea{ text-align: center; } .card {display: inline-block } 

然后删除float: left;.card

链接到JSFiddle