如何保持浮动 div 元素的网格类型排列在其容器中的中心，以不同的屏幕宽度

Question

我试图将div居中div，所以我尝试了其他问题中的所有解决方案，例如：

如何使用 CSS 轻松地水平居中

？

如何将一个

水平居中另一个

？

但我不能把它做好。网格中的人员应始终水平居中。

该页面位于：http://www.arlande.nl/managers，它是一个Drupal站点。它根据220px的内容进行响应。根据人数的不同，整个视图应该是中心。因此，当行中只有 2 人时，整行应居中，如果行中有 3 人，则也应居中。

任何建议我应该应用哪种CSS？外框div 是view-id-smoelenboek响应式 css 已打开div view-content-wrapper

您的问题似乎不适合您的实际问题。查看您的描述和网页，我理解您的问题如下："如何在各种屏幕宽度下保持浮动div元素的网格类型排列在容器的中心？

好吧，你去吧。这是jsfiddle。

#container {
  width:320px;
  margin:auto;  
  background-color:tan;   
  padding:40px;
  box-sizing:border-box;
}
.circle {
  float:left;
  background-color:blue;
  margin:20px;
  height:200px;
  width:200px;
  border-radius:50%;      
}
.clearFix {
  clear:both;
}
@media(min-width:560px) {
  #container {
    width:560px;
  }
}
@media(min-width:800px) {
  #container {
    width:800px;
  }
}
@media(min-width:1040px) {
  #container {
    width:1040px;
  }
}

<div id="container">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="clearFix"></div>
</div>

这个答案不是代码结构的精确表示（你有一些列类），但你应该能够毫不费力地将其应用于你的代码。"圆圈"的行为模仿页面上元素的行为，但居中。这里的关键是使用媒体查询在各种屏幕宽度下重新定义容器的宽度值。

//CSS

.centerBlock {
     display: table;
    margin: auto
}

.HTML

<div class="centerBlock">
      something
</div>

你的风格搞砸了。可以使用媒体查询吗？在某些设备上，宽度还可以，但在其他设备上则不行。媒体查询应该可以解决它。

.view-id-smoelenboek .views-column {
    float: left;
    width: 220px;