title: CSS: center icon in div
body: <p>I'm having issue with fixing icon in the middle of my div. I just want to know how to fix material-icons icon-def in div collapse menu trigger. Thank you for answering me. In jsfiddle it's working, but not in my browser.
  <a href="https://jsfiddle.net/4goLq4q4/1/" rel="nofollow noreferrer">https://jsfiddle.net/4goLq4q4/1/</a></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>#navbar {
    background: rgb(16, 16, 16);
    color: white;
    width: 70px;
    position: absolute;
    margin: 0;
    top: 0;
    bottom: 0;
    border-right: rgb(246, 246, 255) 1px solid;
  }
  
  .collapse-menu-trigger {
    display: block;
    width: 70px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    position: absolute;
    bottom: 0;
    cursor: pointer;
  }
  
  .collapse-menu-trigger .material-icons {
    vertical-align: middle;
  }
  
  .collapse-menu-trigger .material-icons.icon-def {}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="navbar"&gt;
    &lt;div class="collapse-menu-trigger"&gt;
      &lt;i class="material-icons icon-def"&gt;keyboard_arrow_right&lt;/i&gt;
      &lt;i class="material-icons icon-inuse"&gt;keyboard_arrow_left&lt;/i&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>