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...

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

What is the right approach to align everything centered?