html - 中心 div 宽度取决于内容

Question

我正在尝试实现如下所示的目标:

我不知道将呈现多少个绿色元素，因为这是由 CMS 以及作者决定在其中放置多少组件决定的。

要求是在换行前每行有5个盒子。

问题是:当我将 red 包装器设置为 inline-block 时，margin: auto 不起作用。

div.container {
  background: black;
  padding: 10px;
}

div.wrapper {
  margin: 0 auto;
  background: red;
  padding: 10px;
  display: inline-block;
}

div.box {
  display: inline-block;
  background: lime;
  padding: 10px;
  margin: 0 10px;
}

<div class="container">
  <div class="wrapper">
    <div class="box">
      Content 1
    </div>
    <div class="box">
      Content 2
    </div>
  </div>
</div>

Answer 1

div.container {
  background: black;
  padding: 10px;
  text-align: center;
}

div.wrapper {
  margin: 0 auto;
  background: red;
  padding: 10px;
  display: inline-block;
}

div.box {
  display: inline-block;
  background: lime;
  padding: 10px;
  margin: 0 10px;
}

<div class="container">
  <div class="wrapper">
    <div class="box">
      Content 1
    </div>
    <div class="box">
      Content 2
    </div>
  </div>
</div>

只需将 text-align center 添加到 div.container