How to align center vertically using Tailwind
I always tend to forget how to align center vertically using Flexbox.
You need a container with those CSS instructions:
display: flex;
align-items: center;
justify-content: center;
In Tailwind, this translates to the classes flex items-center justify-center
.
Example:
<div class='flex items-center justify-center'>
<button>Add</button>
</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