如何在Angular中设置Snackbar消息居中显示？

我通过点击按钮调用Snackbar，相关代码如下：

HTML代码 #

<button mat-icon-button (click)="UpdateCandidateData(row)" matTooltip="Save Changes" matTooltipPosition="left" color="primary">
  <mat-icon>check_circle</mat-icon>
</button>

TypeScript及CSS代码 #

UpdateCandidateData(item: any) {
    if (item) {
      item.isEditing = false;
      delete item.isEditing;
      item.dob = (this.formatdate(item.dob) + "T00:00:00.00Z")
      item.joiningDate = (this.formatdate(item.joiningDate) + "T00:00:00.00Z");
    }
    this._candidateService.UpdateCandidateData(item.candidateId, item).subscribe(
      (data) => {
        this.openSnackBar("Successfully Updated", "ok")
      },
      (err) => {
        console.log(err);
      }
    )
  }

openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, {
      duration: 2000,
      verticalPosition:'bottom',
      panelClass:['red-snackbar']
    });
}

.red-snackbar{
 top:100px;
}

我尝试设置Snackbar在屏幕居中，但它仍显示在底部，请问如何让它显示在屏幕中间？

解决方案 #

要实现Snackbar居中，需解决两个核心问题：移除Material默认的垂直位置限制，以及用高优先级CSS覆盖默认定位规则。

1. 删除verticalPosition配置
   原代码中verticalPosition:'bottom'会强制Snackbar固定在底部，直接覆盖自定义定位样式，必须删除该配置项。

2. 修改CSS实现居中定位
   Angular Material的Snackbar通过cdk-overlay-pane容器渲染，需要用更具体的选择器提升样式优先级，确保自定义定位生效。

修改后的代码如下：

更新后的TypeScript代码

openSnackBar(message: string, action: string) {
  this.snackBar.open(message, action, {
    duration: 2000,
    panelClass: ['centered-snackbar'] // 替换原red-snackbar类，或新增此类
  });
}

更新后的CSS代码

/* 用高优先级选择器覆盖Material默认样式 */
.cdk-overlay-pane.centered-snackbar {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0;
}

/* 如需保留原红色样式，可合并到该类 */
.centered-snackbar {
  background-color: #f44336;
}

原理说明 #

• 移除verticalPosition后，Material不再限制Snackbar的垂直位置，允许自定义定位生效。
• cdk-overlay-pane.centered-snackbar选择器优先级高于单独的类选择器，能覆盖Material的默认定位规则。
• transform: translate(-50%, -50%)配合top:50%和left:50%，可让Snackbar不受自身尺寸影响，完美居中于屏幕。

内容的提问来源于stack exchange，提问作者Bellam Bharath