如何在垫卡中居中标题？

Question

在我将 matcard 大小的高度设置为 10px 后，标题位置不正确，它不再位于卡片的中间。 我尝试在 css 中使用 position 和 top 但没有任何效果。 任何建议或帮助将不胜感激。

    <mat-card class="alert" *ngIf="showBroadcast">
      <mat-card-title *ngFor="let help of broadcastText | async">
          <p style="font-size: 15px; color: black; top: 194px;">{{getMessage(help)}}</p>
      </mat-card-title>
    </mat-card>

.alert{
  margin-bottom: 10px;
  background-color:  #D2232B;
  border-radius: 6px;
  opacity: 1; 
  height: 10px;
}

Answer 1

将容器显示为flex并将项目居中对齐：

https://stackblitz.com/edit/angular-mat-card-example-nm6ywr?file=src/app/app.component.css

.alert{
  margin-bottom: 10px;
  background-color:  #D2232B;
  border-radius: 6px;
  opacity: 1; 
  height: 10px;
  display: flex;
  align-items: center;
}