Center child divs inside parent div
Try using display: inline-block
and text-align: center
.parent {
width: 100%;
border: 1px solid blue;
text-align: center;
}
.child {
display: inline-block;
border: 1px solid red;
margin: 2px;
}
jsFiddle: http://jsfiddle.net/qdHH3/3/
.child {
$box-size: 100%;
width: $box-size;
height: $box-size;
display: flex;
justify-content: center;
align-items: center;
}
Flex solution: set justify-content: center;
to the parent element:
.parent {
display: flex;
justify-content: center;
/* align-items: center; /* To align vertically, if needed */
}
.parent, .child { border: 1px solid #000; }
<div class="parent">
<div class="child">child1</div>
<div class="child">child2 - center us child divs! :)</div>
<div class="child">child3</div>
</div>