Vertical align with a full screen across Tailwind CSS

#jetthoughts #css #tilewind #webdev

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">
  <h1>Title</h1>
</div>

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">
    <h1>Title</h1>
  </div>
</div>