DEV Community

Cover image for Vertical align with a full screen across Tailwind CSS
JetThoughts Dev for JetThoughts

Posted on • Updated on • Originally published at jetthoughts.com

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">
  <h1>Title</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)