Tailwind CSS Vertical Center - Full Screen Flexbox

May 23, 2022 - 1 min read
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>

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>

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 .

Filed under: jetthoughts , css , tilewind , webdev
Comments