How to center horizontally and vertically with CSS and Flexbox?

Spread the love

Sometimes, we want to center horizontally and vertically with CSS and Flexbox.

In this article, we’ll look at how to center horizontally and vertically with CSS and Flexbox.

To center horizontally and vertically with CSS and Flexbox, we can set the justify-content and align-items properties.

For instance, we write

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

to make the element with class container a flex container with display: flex;.

Then we horizontally center the items inside it with justify-content: center;.

And we vertically center the items inside it with align-items: center;.