How to align center vertically using Tailwind

May 6, 2021

~~~

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

~~~