title: How to use flex/grid to center grid in a container?
body: <p>Even though there are a lot of questions on centering divs and what not, for some reason none of them seem to work. Being the css noob that I am with flex/grid, all I know is that I want to have:</p>
  <ul>
  <li>fixed header</li>
  <li>fixed middle content (both horizontally and vertically centered)</li>
  <li>fixed footer</li>
  </ul>
  <pre><code>
      &lt;div className=&quot;flex flex-col h-screen&quot;&gt;
        &lt;!-- HEADER --&gt;
        &lt;header className=&quot;flex h-20 bg-gray-100 justify-center items-center&quot;&gt;
          &lt;span className=&quot;font-bold text-2xl&quot;&gt;
            title
          &lt;/span&gt;
        &lt;/header&gt;
      
        &lt;!-- BODY --&gt;
        &lt;div className=&quot;flex-1 flex-col mx-auto justify-center items-center max-w-screen-lge p-5&quot;&gt;
          &lt;div className=&quot;grid grid-cols-2 gap-4 items-center&quot;&gt;
            &lt;div className=&quot;flex col-span-1 h-20 items-center justify-center bg-gray-300&quot;&gt;
              1
            &lt;/div&gt;
            &lt;div className=&quot;flex col-span-1 h-20 justify-end bg-gray-300&quot;&gt;
              2
            &lt;/div&gt;
            &lt;div className=&quot;flex col-span-2 h-12 items-center justify-center bg-gray-300&quot;&gt;
             3
            &lt;/div&gt;
            &lt;div className=&quot;flex col-span-2 h-48 items-center justify-center bg-gray-300&quot;&gt;
              4
            &lt;/div&gt;
            &lt;div className=&quot;flex col-span-2 h-48 items-center justify-center bg-gray-300&quot;&gt;
              5
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      
        &lt;!-- FOOTER --&gt;
        &lt;footer className=&quot;flex h-20 bg-gray-100 justify-center items-center&quot;&gt;
          &lt;p&gt;footer text&lt;/p&gt;  
        &lt;/footer&gt;
      &lt;/div&gt;
  
  </code></pre>
  <p>So far it looks like this:
  <a href="https://i.stack.imgur.com/tGhN3.png" rel="nofollow noreferrer">layout</a></p>
  <p>How would I center the grid div inside the flex-1 (is that even a right choice?) container?</p>
  <p>Edited:
  <a href="https://i.stack.imgur.com/WPlug.png" rel="nofollow noreferrer">parent element</a>
  <a href="https://i.stack.imgur.com/6QrMz.png" rel="nofollow noreferrer">content (child)</a></p>