How to Vertically Center Content with CSS (Simple Method)

Let’s vertically align your design elements with CSS and HTML! Even though many people search for this method, vertically centering content is harder than it looks for beginners. The method below is one of the simplest ways to make it happen.

Demo: How to Vertically Align Middle with CSS

HTML

Copy the code below and paste it into your HTML document.

<div class="div-outer">
    <div class="div-inner">
        <h4>Box One</h4>
        <p>Vertical Align Center</p>
    </div>
</div>
<div class="div-outer">
    <div class="div-inner">
        <h4>Box Two</h4>
        <p>Vertical Align Middle</p>
    </div>
</div>
<div class="div-outer">
    <div class="div-inner">
        <h4>Box Three</h4>
        <p>Vertical Align Center</p>
    </div>
</div>

CSS

Copy the code below and paste it into your CSS file. The outer div needs the same min-height and line-height; in this example both are 200px.

.div-outer {
    min-height: 200px;
    line-height: 200px;
}
.div-inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

If this CSS doesn’t work for you, try the alternative below.

.div-outer {
    height: 80vh;
    position: relative;
}
.div-inner {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

You can tweak the colors of the boxes and text. Have fun!