在 Angular、Material 和 Flex-Layout 上以 mat-progress-spinner 为中心覆盖文本

Question

我在我的角度项目中使用材质和柔性布局。我有一个 mat-progress-spinner，我想将文本置于其中。我使用绝对位置得到了它，但我的问题是，它不会保持在不同尺寸的屏幕上居中。这是我的代码

子组件.html

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

子组件.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%);
}

希望这可以帮助。