title: Centering an "i" element in a div
body: <p>Can anyone think of a better way to center this "i" element into this div, without using pixel specific margins as I have done here.
  It will be necessary, as the div the "i" element is in grows when hovering over it.</p>
  
  <p>here is my code.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="nav-collapse"&gt;
    &lt;i class="fa fa-bars fa-2x" id="bars"&gt;&lt;/i&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.nav-collapse {
  top: 30px;
  right: 30px;
  position: fixed;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: white;
  z-index:200;
  transition: width 0.2s, height 0.2s;
  
  }
  
  .nav-collapse i{
  position: absolute;
  color: #FFB361;
  }
  
  #bars {
  margin-left: 11px;
  margin-top: 9px;
  }
  
  
  .nav-collapse:hover {
      width: 60px;
      height: 60px;
  }
  </code></pre>