Vertically Align Item Middle of screen in TailwindCSS

align middle of screen tailwindcss

In TailwindCSS you can make use of flexbox to align items right in the middle of the screen by using the following properties

flex : changes the div to a flex box container.
justify-center : Aligns the content / div horizontally in the center of the screen
items-center : This aligns items vertically in the center of the flex box.
h-screen : This will allow your flex box to take up the whole height of the screen.

<div class="flex h-screen items-center justify-center border-x border-blue-800">
      <div class="text-8xl text-blue-800">Look Ma, I am Centered</div>

This code should give you the following result on the screen

align middle of screen tailwindcss

Livewire Component Library

Site Footer