Tailwind CSS Vertical Center - Full Screen Flexbox

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>

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>

If you inherited a codebase where the team rolls custom layout hacks instead of using Tailwind’s built-in utilities, that’s a sign worth digging into. Our code quality evaluation guide helps non-technical founders spot these patterns before they compound.

For more Tailwind CSS techniques, see our guides on creating triangles in Tailwind and pure CSS triangles.