Center div content

Flexbox

Center <div> vertically and horizontally with Flexbox layout using Tailwind

<div class="flex justify-center items-center w-full h-screen">
  <p>center</p>
</div>

or CSS

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

Grid

Center <div> vertically and horizontally with Grid layout using Tailwind

<div class="grid place-content-center w-full h-screen">
  <p>center</p>
</div>

or CSS

div {
  display: grid;
  place-items: center;
}

Absolute/relative position

Center <div> content with relative and absolute positioning using Tailwind

<div class="relative w-full h-screen">
  <p class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
    center
  </p>
</div>

or CSS

div {
  position: relative;
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}