how to set snackbar message in the center of Screen in Angular

Question

I have a snackbar i am calling this snackbar on the button click. Below is the button

.html

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

Below is my methods and Css those are responsible for the Snackbar

.cs

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

In the above snackbar i have set the position to center of the screen, but still i am getting this snackbar at the bottom of the screen. How i can set the snackbar at the Middle of the screen. Can anyone help me out of this. am getting the snackbar as attached below

Answer 1

Please set the CSS to

red-snackbar {
    position: fixed !important;
    top: -6%; // whatever value suits your requirement!
}

stackblitz