Example
One could easily center a child element using table display property.
HTML
<div class="wrapper">
<div class="parent">
<div class="child"></div>
</div>
</div>
CSS
.wrapper {
display: table;
vertical-align: center;
width: 200px;
height: 200px;
background-color: #9e9e9e;
}
.parent {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child {
display: inline-block;
vertical-align: middle;
text-align: center;
width: 100px;
height: 100px;
background-color: teal;
}
