Vertical align within flexboxes with Tailwind CSS

In order to align contents vertically in a flexbox in Tailwind CSS you need to have align-items: center; set on the flex container. You may add this by using the class items-center.

<main class="flex items-center">
  <div>...</div>
</main>

Keep in mind that in order to see a visual difference the flex container needs a height bigger than its child element. So you may do this by adding the class min-h-screen, which sets the minimal screen height to 100vh. Other options like h-40, just picking a random height here, work too for example.

<main class="flex items-center min-h-screen">
  <div>...</div>
</main>

In order to completely center the child element, so horizontally as well, you need to have justify-content: center set as well on the flex container. To do so you use the justify-center class in Tailwind. Now the same applies to width here as we had before with the height. In order to see a visual difference make sure that the width of the parent element is bigger than the width of the child element. You may do so by adding the class w-full.

<main class="flex items-center justify-center min-h-screen w-full">
  <div>...</div>
</main>