角度4加载组件中心垂直和水平

Question

我正在创建一个加载组件，我可以在我的网站上使用Bootstrap 4在我的网站上的多个位置使用。我的内容水平居中于div但是我无法获取文本，并且图标为中心里面的div。我使用Font-Awesome作为图标。

你曾经写过如此多的HTML，你的大脑停止工作，突然间你无法找到一个解决方案来集中一些文字和旋转图标？因为那就是我现在所处的位置。

加载组件Html：

<div class="text-center" [style.height.px]="height" [style.cursor]="loading? 'not-allowed': ''">
  <div [style.height.px]="height" class="display-inline-block align-middle justify-content-center">
    <h3>{{loadingText}}</h3>
    <i class="fa fa-cog fa-spin fa-5x"></i>
  </div>
</div>

自定义CSS：

.display-inline-block
{
    display:inline-block;
    align-items: center;
}

截图：