title: How to center <i> tag in a div
body: <p>I would like to center an fa on a div using i tag but I'm kinda clueless on how to do that. Any help? </p>
  
  <p>I'm kinda new here.</p>
  
  <p>Thanks</p>
  
  <p>Sample html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;style&gt;
      #lock-cirle {
          border: solid 2px #9f070a;
          border-radius: 100%;
          width: 100px;
          height: 100px;
          margin: 0px auto;
          margin-top: 5%;
          margin-bottom: 5%;
      }
  
      #lock-icon{
          font-size: 50px;
          color: #9f070a;
          margin: 27%;
      }
  
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2 text-center"&gt;
      &lt;div id="lock-cirle"  style="background-color: yellow;"&gt;
          &lt;i class="fa fa-lock" id="lock-icon" style="background-color: green;"&gt;&lt;/i&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>