Twitter bootstrap 角度4垂直和水平加载部件中心

我正在创建一个加载组件，我可以在Angular 4和Bootstrap 4中的网站上的多个位置使用它。我有我的div内水平居中的内容，但我不能得到文本，并在div内的图标居中。我使用的图标字体真棒

你有没有写过这么多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>

截图：

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