Skip to content

How to align center in flexbox

Flexbox has become my favorite way to center an element on a page.

You wrap an item in a div, and you set display: flex and justify-content: center.

<div class="wrapper">
  ...
</div>
.wrapper {
  display: flex;
  justify-content: center;
}

Using Tailwind CSS it’s easier, all you have to do is to add the flex and justify-center classes:

<div class="flex justify-center">
   ...
</div>

→ Here's my latest YouTube video

→ Get my CSS Handbook

→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list