Tailwind CSS: How to align center vertically using Tailwind

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.

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>

Lessons in this unit:

0: Introduction
1: Box model properties
2: Colors
3: Typography
4: Flexbox and Grid in Tailwind
5: Modifiers
6: Responsive design in Tailwind
7: Apply a style to children with Tailwind
8: How to fix Unknown at rule @tailwindcss (unknownAtRules) in VS Code
9: ▶︎ How to align center vertically using Tailwind
10: How to use custom fonts with Tailwind CSS
11: Setting up Tailwind CSS on Vite - css
12: Show-hide an element based on existence of a parent class in Tailwind - css
13: The Tailwind Cheat Sheet
14: How to setup Tailwind with PurgeCSS and PostCSS
15: You can’t generate classes dynamically in Tailwind