tailwind1-4  Exercise 2: A Sticky Footer, with Centred Content
==============================================================

Part 1: the sticky footer.

<body class="min-h-dvh flex flex-col">
  <header id="hdr" class="h-16 bg-gray-100">Header</header>
  <main id="main" class="flex-1 p-4">Short page.</main>
  <footer id="ftr" class="h-12 bg-gray-100">Footer</footer>
</body>

Measure with:

  const R = id => document.getElementById(id).getBoundingClientRect();
  console.log({ viewport: innerHeight, footerBottom: R('ftr').bottom, mainHeight: R('main').height });

Output (measured in headless Chrome, with a viewport 405px tall):

  with flex-1:     viewport 405, footerBottom 405, mainHeight 293   (293 = 405 - 64 - 48)
  without flex-1:  viewport 405, footerBottom 168, mainHeight 56    (the footer rides up under the content)

Part 2: centre the content in the leftover space. Keep the footer at the bottom and make main a grid with one centred cell:

<main id="main" class="flex-1 grid place-items-center p-4">
  <div id="blk">
    <h1 id="h" class="text-2xl font-bold">Welcome</h1>
    <p id="p">Centred in the space between header and footer.</p>
  </div>
</main>

Measure the middle of the block against the middle of main:

  const m = R('main'), b = R('blk');
  console.log({ blockCentreY: b.top + b.height / 2, mainCentreY: m.top + m.height / 2, blockCentreX: b.left + b.width / 2 });

Output:

  footerBottom 405, main from 64 to 357, blockCentreY 210.5, mainCentreY 210.5, blockCentreX 450 (the page is 900px wide)

WHY THIS WORKS AS AN ANSWER
---------------------------
min-h-dvh makes the body at least as tall as the visible screen, and flex-col stacks header, main and footer. flex-1 is flex: 1, so main takes all the free height:
405 - 64 (header) - 48 (footer) = 293. The footer is then pushed to the very bottom, 405. Without flex-1, main is only as tall as its content (56px), the footer
follows it, and the free space is left below the footer.
For the centred block, main has already been stretched by flex-1 to 293px, so making main itself a grid with place-items-center centres the block in that box:
the block's centre (210.5) equals main's centre (64 + 293/2 = 210.5), and horizontally it is at 450, the middle of the 900px page. flex-1 plus grid on the same
element is fine: flex-1 is about how main behaves as a child of the body (a flex item), while grid place-items-center is about how main arranges its own children.