tailwindcss - vertically & horizontalling a div

Question

I can't seem to find a working way for vertically & horizontally centering a div when using tailwindcss.

This is my current code that doesn't particularly works :

<div class="absolute flex items-center justify-center">
  <Contact />
</div>

Answer 1

If you have a header and you want to ignore the header and center the content the code goes like:

<div>
  <div className="flex h-screen flex-col bg-gray-100">
   <header className="text-white text-center fixed top-0 left-0 right-0 bg-blue-600">
      Header
   </header>
   <main className="  flex flex-1 justify-center items-center">
      <div className="shadow bg-white rounded-md  w-full text-center">
        Content
      </div>
   </main>
  </div>
</div>

Answer 2

Try with this example something like <div class="grid place-items-center h-screen">