水平居中多个行的流体div

Question

我想在下面实现预期的布局（第一张图片）但是仍然坚持实际布局（第二张）

这是我开始的方式

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

如何进一步推进预期的布局？

Answer 1

保持css：将float左移至显示：inline-block

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

Answer 2

请尝试以下操作： LINK

的CSS：

.parent{
    margin: 0 auto;
    display:block;
    text-align:center;

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