Aligning centered vertical and horizontal within nested div

I am struggeling while trying to center my content vertical and horizontal within a nested div with tailwindcss.

<div class="flex flex-col items-center min-h-screen">
    <header class="flex-none text-center w-full">
        <p>Header</p>
    </header>

    <div class="grow w-full">
        <div id="home" class="flex justify-center item-center min-h-max">
            <main>
                <p>Shall be vertical and horizontal center.</p>
            </main>
        </div>
    </div>

    <footer class="flex-none text-center m-2 w-full">
        <hr class="mx-auto mb-2 sm:w-56 w-36 h-0.5 bg-gray-100 rounded border-0 shadow-2xl" />
        <div class="flex sm:flex-row flex-col sm:gap-4 gap-1 justify-center text-sm font-light">
            <p>Footer<p>
        </div>
     </footer>
</div>

The code is also wrapped up here: https://play.tailwindcss.com/5B2w0RGQzm?size=540x1014

I already tried different height and min-height classes, but I am still failing...

What is the right approach to align everything centered?

Solution

try to dispatch your class otherwise and allow yourself to set flex (@child) into flex (from parent) , so it respects your idea and uses flex grid properties through your DOM levels.

Possible example below if i understood your issue:

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col items-center min-h-screen" style="">
  <header class="flex-none text-center w-full">
    <p>Header</p>
  </header>

  <div class="flex flex-column grow w-full justify-center items-center">
    <div id="home">
      <main>
          <p>Shall be vertical and horizontal center.</p>
      </main>
    </div>
  </div>

  <footer class="flex-none text-center m-2 w-full">
    <hr class="mx-auto mb-2 sm:w-56 w-36 h-0.5 bg-gray-100 rounded border-0 shadow-2xl" />
    <div class="flex sm:flex-row flex-col sm:gap-4 gap-1 justify-center text-sm font-light">
      <p>Footer at bottom <p>
    </div>
  </footer>
</div>

other possible example:

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col items-center min-h-screen" style="">
  <header class="flex-none text-center w-full">
    <p>Header</p>
  </header>

  <div class="flex  grow ">
    <div id="home" class="flex  grow ">
      <main class="flex flex-column grow w-full justify-center items-center">
        <p>Shall be vertical and horizontal center.</p>
      </main>
    </div>
  </div>

  <footer class="flex-none text-center m-2 w-full">
    <hr class="mx-auto mb-2 sm:w-56 w-36 h-0.5 bg-gray-100 rounded border-0 shadow-2xl" />
    <div class="flex sm:flex-row flex-col sm:gap-4 gap-1 justify-center text-sm font-light">
      <p>Footer at bottom
        <p>
    </div>
  </footer>
</div>