Html Can'；中心货柜部

我希望有一个占据整个宽度的居中按钮网格，但无论我怎么做，我似乎都无法使容器居中

这是JSFIDLE-

谢谢

<div class="Wrapper">
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
</div>
<div style="clear: both;"></div>

---

您的主要问题是

gridButton

的

float: left;

相反，使用

display: inline-block;

现在，您的按钮可以彼此相邻自由移动并居中。您的包装器元素已为全宽，但您需要告诉它将其内容居中：

.Wrapper {
  display:block;
  width: 100%;
  text-align: center;
}

您可以去掉

margin:0 auto

，因为这只会影响具有已知宽度的块

.Wrapper{
显示：块；
文本对齐：居中；
宽度：100%；
}
.网格按钮{
填充：10px；
背景色：#ff5100；
颜色：#ffffff；
保证金：5px；
显示：内联块；
宽度：250px；
文本对齐：居中；
文本转换：大写；
}

试验
试验
试验
试验
试验
试验
试验

您已将

.Wrapper

设置为

100%

宽度，因此即使您有

边距：auto

，容器也是全宽的，不会显示在中心位置。将其设置为较高断点处的恒定宽度：

@media (min-width: 500px) {
  .Wrapper {
    width: 500px;
  }
}

然后考虑在列中包装按钮：

.cell {
  float: left;
  width: 50%;
}

这是您的最新版本。

使用flexbox：

.Wrapper {
  display:flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin: 0 auto;
  width: 100vw;
}

---

我还将宽度替换为

如果这是您想要的，请查看此处

这是你需要的吗

.Wrapper {
  display:block;
  margin: 0 auto;
  width: 100%;
}

.gridButton {
  padding: 10px;
  background-color: #ff5100;
  color: #ffffff;
  margin: 5px;
  width: 250px;
  text-align: center;
  margin:auto;
  text-transform: uppercase;
}

您可以使用

float:left属性

.Wrapper {
  display:block;
  margin: 0 auto;
  width: 100%;
    border:1px solid;
}

.gridButton {
  padding: 10px;
  background-color: #ff5100;
  color: #ffffff;
  margin: 5px auto;
  /*float: left;*/
  width: 250px;
  text-align: center;
  text-transform: uppercase;
}

.Wrapper {
  display:block;
  margin: 0 auto;
  width: 100%;
}

.gridButton {
  padding: 10px;
  background-color: #ff5100;
  color: #ffffff;
  margin: 5px;
  width: 250px;
  text-align: center;
  margin:auto;
  text-transform: uppercase;
}