html - 如何在父 div 中居中放置多个 div 元素？

Question

我试图将较小的 div 置于较大的 div 中。我的代码如下所示:

Codepen Link

    div.box-collective {
    	background-color: grey;
    	width: 100%;
    }
    
    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>

由于无法用文字解释我想做什么，请查看这些图片以获得更好的想法:

在上面的例子中，屏幕宽度很大(桌面)。基本上，我的代码看起来像顶级版本。我想要的结果是底部的那个，也就是完美居中的一组框。

在这种情况下，屏幕很小，并且由于每个框都是行内 block ，因此在调整屏幕大小时它们会自动换行。然而，我想再次将它们居中，类似于右图。

如何使用纯 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>