Sometimes, we want to center horizontally and vertically with flexbox and CSS.
In this article, we’ll look at how to center horizontally and vertically with flexbox and CSS.
How to center horizontally and vertically with flexbox and CSS?
To center horizontally and vertically with flexbox and CSS, we use align-items and justify-content.
For instance, we write
#parent {
display: flex;
align-items: center;
justify-content: center;
}
to make the element with ID parent a flex container with display: flex;.
Then we vertically align the items inside with align-items: center;.
We horizontally align the items inside with justify-content: center;.
Conclusion
To center horizontally and vertically with flexbox and CSS, we use align-items and justify-content.
