Skip to content

How to align center vertically using Tailwind

New Courses Coming Soon

Join the waiting lists

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>
→ Get my CSS Handbook
→ Read my CSS Tutorial on The Valley of Code

Here is how can I help you: