How to perfectly center a div in Tailwind CSS?

The most modern and universally accepted way to perfectly center a div both vertically and horizontally in Tailwind CSS is using either Flexbox or Grid.

Method 1: Grid (Easiest)

<div class="grid h-screen place-items-center">
  <div>I am perfectly centered!</div>
</div>

Method 2: Flexbox (Standard)

<div class="flex h-screen items-center justify-center">
  <div>I am also perfectly centered!</div>
</div>

Both methods require the parent container to have a height (e.g.,

or ). Grid is technically shorter, but Flexbox offers more granular control if you add multiple elements later.