# 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](https://bytegrad.com/courses/professional-css?utm_source=blog-post&utm_medium=blog-post&utm_campaign=blog-post).

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`:

![CSS-Flexbox-Centering-Horizontally.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636566761261/JZft6M0Gv.png)

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

![CSS-Flexbox-Centering-Horizontally-And-Vertically.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636566807842/82G-wVmhT.png)

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:

![CSS-Flexbox-Centering-Horizontally-And-Vertically-Align-Content.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636566884704/J01XteXNw.png)

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`:

![CSS-Flexbox-Centering-Horizontally-When-Flex-Direction-Is-Column.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636567228145/b3ZxW_GMi.png)

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


![CSS-Flexbox-Centering-Horizontally-When-Flex-Direction-Is-Column-Align-Content (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636567559154/valMyvwUL.png)

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

![CSS-Flexbox-Centering-Vertically-When-Flex-Direction-Is-Column-Justify-Content (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636567481392/k23F5e5KC.png)

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](https://bytegrad.com/courses/professional-css?utm_source=blog-post-2&utm_medium=blog-post-2&utm_campaign=blog-post-2) 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](https://email.bytegrad.com).

Also, I show projects of upcoming courses on social media, follow me here:

[Facebook](https://www.facebook.com/ByteGrad) 
[Twitter](https://twitter.com/bytegradcom) 
[Instagram](https://www.instagram.com/bytegradcom/)