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

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

Continue reading...