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

Question

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

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%;
}

这是一个以父组件为中心的子组件，使用以下

parent.component.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%);
}

希望对您有所帮助。

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

Overlay text centered in mat-progress-spinner on Angular, Material and Flex-Layout

angular-material

angular-flex-layout

angular