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

<div >
    <header >
        <p>Header</p>
    </header>

    <div >
        <div id="home" >
            <main>
                <p>Shall be vertical and horizontal center.</p>
            </main>
        </div>
    </div>

    <footer >
        <hr  />
        <div >
            <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...

• https://tailwindcss.com/docs/height
• https://tailwindcss.com/docs/min-height

What is the right approach to align everything centered?

CodePudding user response：

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  style="">
  <header >
    <p>Header</p>
  </header>

  <div >
    <div id="home">
      <main>
          <p>Shall be vertical and horizontal center.</p>
      </main>
    </div>
  </div>

  <footer >
    <hr  />
    <div >
      <p>Footer at bottom <p>
    </div>
  </footer>
</div>

other possible example:

<script src="https://cdn.tailwindcss.com"></script>
<div  style="">
  <header >
    <p>Header</p>
  </header>

  <div >
    <div id="home" >
      <main >
        <p>Shall be vertical and horizontal center.</p>
      </main>
    </div>
  </div>

  <footer >
    <hr  />
    <div >
      <p>Footer at bottom
        <p>
    </div>
  </footer>
</div>