Css 将左浮动元素放置在页面中心

我举了以下例子： 使用以下样式：

.menus {
  height: 200px;
  width: auto;
  margin: auto;
}

.menu{
  width: 200px;
  height: 30px;
  float: left;
  border: 2px solid red;
  margin-left: 10px;
  margin-bottom: 10px;
}

这里，菜单元素向左对齐。但另一个需要的行为是确保无论屏幕宽度（即每行显示的菜单div数量）如何，它们都显示在中间。这意味着在每一行中，左菜单和左屏幕边框以及右菜单和右屏幕边框之间的距离应该相同，并且所有菜单都居中。 无法做到，所以也许有人知道如何做到这一点

在下图中，距离1和2应该相等

---

尝试使用css flex box：

.menus {
  height: 200px;
  width: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.menu{
  width: 200px;
  height: 30px;
  float: left;
  border: 2px solid red;
  margin-left: 10px;
  margin-bottom: 10px;
}

---

是的，flexbox。为了您的

页边距：自动.menu

样式上选择code>，您需要在其上设置一个静态宽度。不幸的是，如果菜单数量不均匀，例如五个，则可以看到第二行中的元素显示在中间，而不是左侧。