Complete Overview of Centering in Flexbox CSS (Examples)
Justify-content vs align-items vs align-content
You need to master both Flexbox and CSS Grid in order to professionally build modern websites & web apps. If you haven't mastered both of them yet, I highly recommend going through my CSS Course.
For centering with Flexbox, it's crucial to understand that Flexbox works with 1 direction: either horizontal (row) or vertical (column). The default
flex-direction value is
Given the default situation, we can center flex-items horizontally with
And we can center flex-items vertically with
If we have a lot of flex-items or flex-items that are big such that we want them them to wrap with
flex-wrap: wrap, then we should use
align-content to center them vertically:
flex-direction: row (the default), use justify-content for horizontal centering and align-items (for 1 row) or align-content (for multiple rows) for vertical centering.
Sometimes you need to change the
column. Justify-content and align-items/align-content 'flip' in that case.
That means that now if you want to center the flex-items horizontally, you should use
Or if you have a lot of flex-items so that they wrap, use
To also center the flex-items vertically now, we should use
By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.
Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.
So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.
Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.
Also, I show projects of upcoming courses on social media, follow me here: