html - 在居中的 div 中居中内容

Question

我有以下内容:

<div class='container-main'>
 <div class='container-inner'>
  <div class='clickable-box'>
   stuff
  </div>
  <div class='clickable-box'>
   stuff
  </div>
  <div class='clickable-box'>
   stuff
  </div>
 </div>
</div>

.container-main {
 width: 100%;
}
.container-inner {
 width: 90%;
}
.clickable-box {
 width: 300px;
 height: 300px;
 /* ???? */
}

我正在努力做到这一点，如果旁边没有足够的空间容纳另一个可点击框，则可点击框将在内部容器内居中。

但是如果有足够的宽度(600px +)，那么他们会创建 2 列(它们一起在内部容器中居中)，如果有更多的空间甚至(900px +)，那么 3 列等等......

换句话说，当我从一个宽度为 500 像素的窗口开始时，它应该显示 1 列框，所有框都在彼此下方排列。当我将窗口拖出时，框应保持在中心，直到有足够的空间让另一个框靠近它，然后它们创建了 2 列，依此类推。

但我不希望在拖动窗口时列向左或向右浮动并留下一大片空白

Answer 1

试试这个 CSS:

.container-main {
 width: 100%;
}
.container-inner {
 width: 99%;
    text-align:center
}
.clickable-box {
 display: inline-block;
 width: 32%;
margin: 0 auto;
}