Center align multiple child DIV
Automatic margins will not apply to an element which has a float applied. Removing the float should get you started...
#parent{
display: flex;
justify-content:center;
flex-direction:row; /*default value is row*/
height:350px;
width:75%;
border:1px solid blue;
padding: 10px 0;/* not mandatory */
}
.center {
height:250px;
width:15%;
margin:5px;
border: 1px solid black;
}<div id="parent">
<div id="child1" class="center">
</div>
<div id="child2" class="center">
</div>
<div id="child3" class="center">
</div>
</div>Flex helps us achieve certain things with ease.
If you want to horizontally align your elements centrally, then don't float them.
Change the way they are displayed to inline-block and align them in the center by changing the text-align style of their parent:
#parent {
text-align:center;
height:450px;
width:75%;
border:1px solid blue;
}
.center {
display:inline-block;
height:250px;
width:15%;
margin: 0 auto;
border: 1px solid black;
}<div id="parent">
<div id="child1" class="center"></div><!--
--><div id="child2" class="center"></div><!--
--><div id="child3" class="center"></div>
</div>Be sure to have no white-space or newlines between your children <div>s (in your HTML, that is) or comment it out. Now that these are inline elements, this white-space will be interpreted as a space.