html - 多行的水平居中流体 div

Question

我想实现下面的预期布局(第一张图片)但坚持使用实际布局(第二张图片)

我是这样开始的

.parent .child{
    float: left;
    width: 25%;
    height: 50px;
    margin: 5px 2px 2px 2px;
    background: #000;
}

我怎样才能进一步达到预期的布局？

Answer 1

保持 css :change float left to display:inline-block

.parent{ text-align: center;}
.parent .child{
 display:inline-block;
 width: 25%;
 height: 50px;
 margin: 5px 2px 2px 2px;
 background: #000;
}