在 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>