Vertically and horizontally center text with flexbox

Eduardo Uribe — Fri, 05 Jul 2019 22:30:58 +0000

Today you will learn how to easily center text both vertically and horizontally.

HTML

CSS

Text inside a flex container becomes a flex item by automatically been wrapped in an anonymous block container.

This converts the text into a flex item and allows it to participate in its container's flex formatting context.

Now any flexbox property can be applied to the anonymous block which contains the text.

In this case, we are centering horizontally with justify-content: center; and vertically with align-items: center;

And that's how you center text both vertically and horizontally inside an element, with flexbox.

DEV Community: Eduardo Uribe