Vertically and horizontally center text with flexbox

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

The starting code

HTML

CSS

How it works

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.

Liked to be notified about new small HTML/CSS tips follow me on twitter @Eduardo__Uribe