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

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 >

    <header >Header</header>
      <div >
      <h1>Content</h1>
      <div >

        <div class = "grid gap-6 md:grid-cols-2 content-center">
          <div >
            Item 1
          </div>
          <div >
            Item 2
          </div>
          <div >
            Item 3
          </div>
          <div >
            Item 4
          </div>
        </div>
      </div>
    </div>

    <footer >Footer</footer>
  </div>

CodePudding user response：

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

<div >

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