CSS Centering Horizontal and Vertical centering using table layout


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