Vertical align with Tailwind CSS across full screen div

You can also do

<div class="flex h-screen">
  <div class="m-auto">
    <h3>title</h3>
    <button>button</button>
  </div>
</div>

Partly referencing @mythicalcoder 's solution but using only the necessary classes provided by TailwindCss (Version 1.8.+):

flex : To use a flex-div as container
h-screen : To size the container-height to the viewport height.
justify-center : To justify center (horizontal center) - main axis - Doc
items-center : To align the items to center (horizontal center) - cross axis - Doc

My Solution to center two text lines:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>

  <div class="flex h-screen justify-center items-center">
    <div class="text-center bg-blue-400"> <!-- ⬅️ THIS DIV WILL BE CENTERED -->
        <h1 class="text-3xl">HEADING</h1>
        <p class="text-xl">Sub text</p>
    </div>
  </div>

Vertical align with Tailwind CSS across full screen div

Related

Recent Posts