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.
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;
.