How to align center vertically using Tailwind

May 6, 2021

Learn how to center content vertically and horizontally with Tailwind using the flex, items-center, and justify-center classes on the container element.

~~~

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>

Tagged: CSS · All topics

~~~