Vertical align with a full screen across Tailwind CSS

How can vertically align an element with Tailwind CSS by Flex?

Justify-Center and Items-Center

  • flex : To use a flex-div as a container.
  • h-screen : To size the container height to the viewport height.
  • justify-center : To justify center (horizontal center).
  • items-center : To align the items to the center (vertical center).
<div class="flex h-screen items-center justify-center">

Image description

This is already pretty well documented in the Tailwind CSS docs.

Another way to use Flex for to align items

In this case need to set margin: auto to wrapper of children element.

<div class="flex h-screen">
  <div class="m-auto">