Just The Code Please

How to vertically center an element with CSS

January 9th 2024


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>

Related Links