Vertically Centering Text and HTML Elements With CSS

Vertically centering something in CSS is not as easy as you'd think, and until we got tools like flexbox, it was really hard. Fortunately, vertically centering something within a container is quite easy now. Let's look at how to accomplish it.

Vertically Centering an Item in CSS

Let's assume we have some simple HTML with a div called .item within a container called #container. Our HTML looks like this:

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

When we create this, our output is going to look like the example below. By default, .item will be full width and at the top of the container.

To rectify this, and to center our .item div containing the text, "Hello", we need to make #container a flexbox. To simply center the flexbox vertically, we only have to update our container CSS to look like this:

#container {
    display: flex;
    align-items: center;
}

If we want it to be both centered vertically and also centered horizontally, then we would update our #container CSS to look like this:

#container {
    display: flex;
    align-items: center;
    justify-content: center;
}

Resulting in the following:

Centering an Item in the Middle of the Screen With CSS.

This works fine if we want to center something within a div element, but what if we want to center something exactly in the center of the user's screen? If we want to center something in the middle of a user's screen with CSS, we can still use flexbox, we just need to adjust the width of the container. This time, we'll make #container have a width of 100vw and a height of 100vh.

These two units tell the browser to make the #container width and height match the full width and height of the viewport. We can still keep the same HTML:

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

However, our CSS for the #container element will now be adjusted to add in this new width and height. I've also added box-sizing: border-box, so that #container doesn't overflow and cause scrollbars to appear:

#container {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

Conclusion