Complete Overview of Centering in Flexbox CSS (Examples)

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 row (horizontal).

Given the default situation, we can center flex-items horizontally with justify-content:

And we can center flex-items vertically with align-items:

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:

So: when 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 flex-direction to 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 align-items:

Or if you have a lot of flex-items so that they wrap, use align-content:

To also center the flex-items vertically now, we should use justify-content:

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.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in 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:

Facebook Twitter Instagram