在 Angular、Material 和 Flex-Layout 上以 mat-progress-spinner 為中心的疊加文本

Question

我在我的 angular 項目中使用材料和彈性布局。 我有一個 mat-progress-spinner，我想在其中將文本居中。 我使用 position absolute 得到了它，但我的問題是它不會保持在不同尺寸的屏幕上。 這是我的代碼

child.component.html

<div>
  <mat-progress-spinner mode="indeterminate" [strokeWidth]="2" [diameter]="192"></mat-progress-spinner>
  <div class="message">{{ message }}</div>
</div>

child.component.scss

.mat-progress-spinner {
  display: inline-block;
  vertical-align: middle;
}

.message {
  position: absolute;
  text-align: center;
  top: 49%;
  left: 44%;
}

這是一個子組件，使用以下內容以父組件為中心

父組件.html

<div fxLayout="column" fxLayoutAlign="center center" fxFill>
  <app-child></app-child>
</div>

謝謝

Answer 1

您可以使用以下內容，它應該可以解決問題：

.message {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

希望這可以幫助。

Answer 2

嘗試在 div 標簽中使用 align =“center”，如下所示

 <div align ="center">
<mat-progress-spinner mode="indeterminate" [strokeWidth]="2" 
[diameter]="192"></mat-progress-spinner>
  <div align ="center" class="message">{{ message }}</div>
</div>