title: I need help centering text in the center of CSS Grid
body: <p>I am unable to align text in the center of the grid, both vertical and horizontally, because nothing that I tried seems to work, so I wanted to know what is the problem with my code or how should I do it. </p>
  
  <p>I tried using <code>justify-items: center</code>, <code>align-items: center</code> and even <code>place-items: center center</code>;</p>
  
  <p>This is a my full, hopefully, you can give it a try and see what is wrong with it.</p>
  
  <p></p>
  
  <p></p>
  
  <pre><code>&lt;title&gt; Learning Grid &lt;/title&gt;
  
  
  &lt;style&gt; 
  
  
      body {
          color: #fff;
          font-family: sans-serif;
          text-align: center;
      }
  
  
      #content {
          display: grid;
          grid-template-columns: repeat(12, 1fr);
          grid-auto-rows: minmax(100px, auto);
          grid-gap: 10px;
          max-width: 960px;
          margin: 0 auto;  
      }
  
  
  
      #content &gt; * {
          padding: 30px;
          font-size: 30px;
  
      }
  
  
      header {
          grid-column: 1/13;
          text-align: center;
          background-color: hotpink;
      }
  
  
       main {
          grid-column: 4/13;
          grid-row: 2/4;
           background-color: darksalmon;
      }
  
  
  
        aside {
          grid-column: 1/4;
          grid-row: 2/3;
            background-color: cadetblue;
      }
  
  
  
       nav {
          grid-column: 1/4;
          grid-row: 3/4;
           text-align: center;
           font-size: 30px;
           background-color: aquamarine;
      }
  
  
  
       section {
          grid-column: 1/13;
          grid-row: 4/6;
           background-color: coral;
      }
  
  
      footer {          
          grid-column: 1/13;
          grid-row: 6/7;
          background-color: cornflowerblue;
      }
  
  
  &lt;/style&gt;
  
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
  
      &lt;div id="content"&gt; 
  
  
          &lt;header&gt; Header &lt;/header&gt;
  
  
          &lt;main&gt; Main &lt;/main&gt;
  
  
          &lt;section&gt;Section &lt;/section&gt;
  
  
          &lt;aside&gt;Aside &lt;/aside&gt;
  
  
          &lt;nav&gt; Nav &lt;/nav&gt;
  
  
          &lt;footer&gt; Footer&lt;/footer&gt;
  
  
      &lt;/div&gt;
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>