Tailwind CSS: How to align center vertically using Tailwind

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.

I always tend to forget how to align center vertically using Flexbox.

You need a container with these CSS properties:

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>

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
12:	Show-hide an element based on existence of a parent class in Tailwind
13:	The Tailwind Cheat Sheet
14:	How to set up Tailwind CSS (v4)
15:	You can’t generate classes dynamically in Tailwind