Essential Books

Horizontal and Vertical centering using table layout

suggest change

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; 
}
Found a mistake? Have a question or improvement idea? Let me know.

Feedback about page:

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

Centering:
* Centering
* Using Flexbox
* Using CSS transform
* Using margin: 0 auto;
* Using text-align
* Using position absolute
* Using calc
* Using line-height
* Vertical align anything with 3 lines of code
* Ghost element technique Micha Czernows hack
* Centering in relation to another item
* Vertically align an image inside div
* Centering vertically and horizontally without worrying about height or width
* Centering with fixed size
* Vertically align dynamic height elements
* Horizontal and Vertical centering using table layout
Table Of Contents