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

我正在尝试将较小的div集中在较大的div中。我的代码如下所示：

div.box-collective{
背景颜色：灰色；
宽度：100%；
}
分区箱{
宽度：100px；
高度：100px；
边框：1px纯黑；
显示：内联块；
利润率：10px；
}

我的箱子

您只需将

文本对齐：居中在您的
div.box-collective
类中


div.box-collective{
背景颜色：灰色；
宽度：100%；
文本对齐：居中；
}
分区箱{
宽度：100px；
高度：100px；
边框：1px纯黑；
显示：内联块；
利润率：10px；
}

我的箱子
解决方案1（现代浏览器）-使用flexbox
我认为这是所有现代web开发人员必备的工具包





.container{
显示器：flex；
弯曲方向：行；
证明内容：中心；
柔性包装：包装；
宽度：100%；
背景颜色：灰色；
}
.集装箱{
宽度：50%；
左边缘：25%；
}
.集装箱{
显示：块；
高度：50px；
宽度：50px；
背景色：红色；
保证金：3倍；
}
文本对齐：居中在这种情况下起作用，但要获得更多的控制（并且不必重置文本对齐），请使用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;
}

只需添加
文本对齐：居中框中的内容向上一个标题。框
也将对齐
中心
。如果你想让它保持相邻，你必须做
div.box-collective>.box{text align:left}
你也会得到我的爱。仅供参考：