title: Angular - Displaying a font awesome spinner center not working
body: <p>I am trying to display a font awesome spinner horizontally center. With the below CSS it is displaying only on the left hand side. Can anyone help me how to fix this?</p>
  <p><em>loading.component.html</em></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;loading-overlay&quot;&gt;
          &lt;i class=&quot;fa fa-spinner fa-spin fa-4x&quot;&gt;&lt;/i&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><em>loading.component.scss</em></p>
  <pre class="lang-css prettyprint-override"><code>.loading-overlay {
      align-items: center;
      display: flex;
      justify-content: center;
      position: absolute;
      z-index: 2;    
  }
  
  .container {
      width: 100%;
  }
  </code></pre>
  <p>Thanks</p>