Horizontal and Vertical centering using table layout

suggest change

One could easily center a child element using table display property.


<div class="wrapper">
    <div class="parent">
        <div class="child"></div>


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

Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents