layout: bpost title: "How to align center vertically using Tailwind" image: "images/content/updating-angular-cli-projects.png" excerpt: "Centering elements has always been a problem in CSS but in Tailwind this is easy." categories: [javascript] permalink: /align-center-vertically-tailwind/

tags: [javascript]

These days, my go-to CSS framework is Tailwind CSS. And now I'll quickly demonstrate how to center items with Tailwind CSS.

We'll examine two strategies for centering a div in Tailwind. The decision between these two approaches cannot simply be deemed correct or wrong. Generally speaking, flexbox CSS should be utilized for details and css grid for high-level layout. We'll use the same CSS structure for our demonstration so you can more clearly observe the differences between the two cases.

Centering a div with Tailwind and CSS Grid

We'll start by using grid center to make a div element horizontally and vertically centered on a page.

<div class="grid place-items-center h-screen">Centered using Tailwind & CSS Grid</div>

The element will be exactly centered both horizontally and vertically on the page thanks to this code.

Centering a div with Tailwind and Flexbox

Utilizing flexbox for the HTML element is a second choice for centering in Tailwind. The method is somewhat similar, but we must use flexbox to determine the horizontal and vertical alignment.

You can center vertically using Tailwind and Flexbox using the following classes:

<div class="flex items-center justify-center">
  This is a div
</div>

Conclusion

We've seen two methods for centering a div in Tailwind using Flexbox and CSS Grid.