title: HTML CSS: Grid Container Align Icons in Vertical Middle
body: <p>How do I align these items in the middle of the boxes? I tried everything vertical align middle, justify content, flex center, text align</p>
  
  <p>Trying to avoid using div from answer suggestion below, unless required, is there another way?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.material-icons
  {
     align-items: center;
     justify-content: center;
     text-align:center;
     vertical-align: middle;
     border-color:black;
     border-width:1px;
     border-style:solid;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet"&gt;
  
  &lt;div class="grid-container" id="gridid1556351f5ece4ee3a7dce6962be48e39" style="  display: grid;
                      grid-template-columns: repeat(1, 250px);
                      grid-template-rows: repeat(2, 250px);
                      grid-gap: 1px;
                      padding: 0px;
                      align-items: stretch;
                      position: relative; "&gt;
  &lt;i class="material-icons" style="font-size:48px;"&gt;notifications&lt;/i&gt;
    &lt;i class="material-icons" style="font-size:48px;"&gt;delete&lt;/i&gt;</code></pre>
  </div>
  </div>
  </p>