如何将父div中的多个div元素居中？

Question

我试图将较小的div放在较大的div中。我的代码如下所示：

Codepen Link

＆＃13;

＆＃13;

    div.box-collective {
    	background-color: grey;
    	width: 100%;
    }
    
    div.box {
    	width: 100px;
    	height: 100px;
    	border: 1px solid black;
    	display: inline-block;
    	margin: 10px;
    }

＆＃13;

    <div class="container">
      <h1>My boxes</h1>
    
    	<div class="box-collective">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    	</div>
    </div>

＆＃13;

＆＃13;

＆＃13;

由于无法解释我在尝试用文字做什么，请查看这些照片以获得更好的主意：

在上述情况下，屏幕宽度很大（桌面）。基本上，我的代码看起来像顶级版本。我的结果我想要的是底部的那个，也就是说，盒子组完全居中。

在这种情况下，屏幕较小，并且由于每个框都是内联块，因此在调整屏幕大小时它们会自动转到新行。然而，我再次想要将它们集中在一起，类似于右图。

如何使用纯CSS实现这一目标？任何帮助表示赞赏。

Answer 1

您只需将text-align:center;放在div.box-collective课程上即可。

div.box-collective {
    background-color: grey;
    width: 100%;
    text-align:center;
}

div.box {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    display: inline-block;
    margin: 10px;
}

<div class="container">
  <h1>My boxes</h1>

    <div class="box-collective">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
</div>

Answer 2

解决方案1（现代浏览器） - 使用flexbox

我认为这是所有现代web-devs工具包中的必备软件。

• Awesome tutorial / cheatsheet

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  background-color: grey;
}

.container.small {
  width: 50%;
  margin-left: 25%;
}
.container .box{
  display: block;
  height: 50px;
  width: 50px;
  background-color: red;
  margin: 3px;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="container small">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

解决方案2 - display: inline-block＆amp; text-align: center;

.container {
  text-align: center;
  margin: 1em 0;
  padding: 1em;
  background-color: grey;
}

.container.small {
 width: 50%;
  margin-left: 25%;
}
.container .box{
  display: inline-block;
  height: 50px;
  width: 50px;
  background-color: red;
  margin: 3px;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="container small">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Answer 3

text-align: center;适用于这种情况，但为了更多控制（无需重置文本对齐），请使用flexbox

div.box-collective {
  background-color: grey;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

div.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  display: inline-block;
  margin: 10px;
  flex: 0 0 auto;
}