Angular - 显示字体真棒微调中心不起作用答案

【问题标题】：Angular - Displaying a font awesome spinner center not workingAngular - 显示字体真棒微调中心不起作用
【发布时间】：2021-10-04 04:14:12
【问题描述】：

我正在尝试在水平中心显示一个很棒的字体微调器。使用下面的 CSS，它仅显示在左侧。谁能帮我解决这个问题？

loading.component.html

<div class="container">
    <div class="loading-overlay">
        <i class="fa fa-spinner fa-spin fa-4x"></i>
    </div>
</div>

loading.component.scss

.loading-overlay {
    align-items: center;
    display: flex;
    justify-content: center;
    position: absolute;
    z-index: 2;    
}

.container {
    width: 100%;
}

谢谢

【问题讨论】：

标签： sass font-awesome angular11

【解决方案1】：

删除position: absolute;就可以了。

.loading-overlay {
  align-items: center;
  display: flex;
  justify-content: center;
  z-index: 2;
}

.container {
  width: 100%;
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

<div class="container">
  <div class="loading-overlay">
    <i class="fa fa-spinner fa-spin fa-4x"></i>
  </div>
</div>

【讨论】：