'TailwindCSS - how to center content on a flex-grow item

I have a basic page layout as follows. I would like to center the four items in the middle of the page, not only horizontally, but vertically. Centering horizontally works but vertically doesn't. According to the tailwind doc, entering can be acheived using the place-content-center class. However, this doesn't seem to work here. Any ideas about how to do this?

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet"/>


<div class="flex flex-col h-screen">

    <header class="h-10 bg-red-500">Header</header>
      <div class="flex-grow place-content-center bg-green-500">
      <h1>Content</h1>
      <div class="grid place-items-center justify-center">

        <div class = "grid gap-6 md:grid-cols-2 content-center">
          <div class="h-[200px] w-[300px] bg-yellow-500 flex flex-col items-center">
            Item 1
          </div>
          <div class="h-[200px]  w-[300px] bg-yellow-500 flex flex-col items-center">
            Item 2
          </div>
          <div class="h-[200px]  w-[300px] bg-yellow-500 flex flex-col items-center">
            Item 3
          </div>
          <div class="h-[200px]  w-[300px] bg-yellow-500 flex flex-col items-center">
            Item 4
          </div>
        </div>
      </div>
    </div>

    <footer class=" w-full  h-10 bg-blue-500">Footer</footer>
  </div>
csstailwind-css


Solution 1:[1]

It appears that you just need to add the h-full class to your content wrapper:

<div class="grid h-full place-items-center justify-center">

You can see a working example here: https://play.tailwindcss.com/U5NB6t6heB

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ed Lucas

Related Questions