javascript - 将容器中的 div 内容居中

Question

在我的网站上，我有一系列这样的 div:

.box{
   float:left;
   width:143px;
   height:183px;
   overflow:hidden;
}

这些 div 在一个像这样的简单容器中:

.container{
   margin:70px 190px 0 190px;
   overflow:hidden;
}

我会实现响应式布局，但 div 在容器中不是水平居中的。我试图添加“margin-left:auto;”和“margin-right:auto”但没有。我有这样的布局:

相反，我会这样布局:

有人可以帮助我吗？

Answer 1

使用 FlexBox 的解决方案。

FlexBox Guide

FlexBox Browsers Compatibility

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
  
    margin:7px 19px 0 19px;
    background-color: red;
}

.box {
    width:143px;
    height:183px;
    margin: 10px;
    background-color: black;
}

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