Summary

Centering stuff in CSS can be tricky. Centering elements vertically can be especially problematic because most webpages are deigned to expand vertically when there is more text. This article shows the various ways you can vertically center an element with CSS.

The Code

.container {
    display: table-cell;
    min-height: 100px;
    vertical-align: middle; 
}
.item {}

<div class="container">
    <div class="item"></div>
</div>

Related Links

• How to center an element using Flexbox
• How to center an element horizontally using margins
• How to center an element using CSS Grid