Horizontally centre fluid div of multiple rows

Question

I want to achieve the expected layout below (first image) but stuck with actual layout (second one)

Here is how I started

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

How can i take it further to expected layout?

Answer 1

keep 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;
}