Center the angular MatDialog

I have implemented a modal dialog using angular MatDialog to be used in place of the alert() function. Everything works fine but the positioning of the dialog. I can't manage to place the dialog at the center of the page. The dialog always appears at the bottom left edge of the page.

The html file looks as follows:

<h2>Oups! Something went wrong.</h2>

<p>{{error}}</p>

<button class="btn-outline-primary" mat-dialog-close>OK</button>


And this the function to open the dialog

private openDialog(error: string) {
const dialogConfig = new MatDialogConfig();

dialogConfig.data = {
error: 'This is a test'
}
dialogConfig.disableClose = false;
dialogConfig.hasBackdrop = false;
dialogConfig.autoFocus = false;
dialogConfig.width = '600px';
dialogConfig.height = '200px';

this.dialog.open(ErrorDialogComponent, dialogConfig);
}


And the component class:

import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA} from "@angular/material";

@Component({
selector: 'app-error-dialog',
templateUrl: './error-dialog.component.html',
styleUrls: ['./error-dialog.component.scss']
})
export class ErrorDialogComponent {
error: string;

constructor(@Inject(MAT_DIALOG_DATA) data) {
this.error = data.error;
}
}


Here a screenshot:

Continue reading...