如何在墊卡中居中標題？

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