title: How to change the position of modal dialog box?
body: <p>I am working on Angular 4 project and I have created a modal dialog box using Angular material. But the dialog box appears in the left side bottom of a page. How can I place the modal dialog in the middle of a page. </p>
  
  <p>This is open dialog method. I called openDialog() method in another method.</p>
  
  <pre><code>openDialog() {
  
  let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
    panelClass: 'my-centered-dialog',
    width: '450px',
    height: '250px',
  });
  
  dialogRef.afterClosed().subscribe(result =&gt; {
    console.log('The dialog was closed');
  });
  }
  </code></pre>
  
  <p>This is DialogOverviewExampleDialog class.</p>
  
  <pre><code>@Component({
    selector: 'dialog-overview-example-dialog',
    templateUrl: 'dialog-overview-example-dialog.html',
  })
  export class DialogOverviewExampleDialog {
  
    constructor(
      public dialogRef: MatDialogRef&lt;DialogOverviewExampleDialog&gt;,
      @Inject(MAT_DIALOG_DATA) public data: any) { }
  
    onNoClick(): void {
      this.dialogRef.close();
    }
  
  }
  </code></pre>