title: Cannot center the modal window from angular material
body: <p>It is crazy but the following code:</p>
  <pre class="lang-js prettyprint-override"><code>import { Component, Inject } from '@angular/core';
  import { MatDialog, MatDialogRef, MatDialogConfig, MAT_DIALOG_DATA } from '@angular/material';
  
  @Component({
      selector: 'decline',
      templateUrl: './decline.component.html',
      styleUrls: ['../../../styles/main.css']
  })
      
  export class DeclineComponent {
  
      animal: string;
      name: string;
      config: MatDialogConfig = {
          disableClose: false,
          hasBackdrop: true,
          backdropClass: '',
          width: '250px',
          height: '',
          position: {
              top: '',
              bottom: '',
              left: '',
              right: ''
          }
      };
      constructor(public dialog: MatDialog) { }
  
      openDialog(): void {
          let dialogRef = this.dialog.open(DialogOverviewExampleDialog, this.config);
      }
  
  }
  
  @Component({
      selector: 'dialog-overview-example-dialog',
      template: `
          This is nothing
            `
  })
  export class DialogOverviewExampleDialog {
  
      constructor(
          public dialogRef: MatDialogRef&lt;DialogOverviewExampleDialog&gt;) { }
  
  }
  </code></pre>
  <p>does not center (horizontally and vertically) the modal window whereas <strong>in all examples</strong> I have seen so far, it is nicely centered. I cannot find the problem...
  I have to say that I am using <code>'~@angular/material/prebuilt-themes/indigo-pink.css&quot;</code>. Apart from that, I tried to center it manually by adjusting the <strong>position object</strong> inside config. However it does not accept something like <code>left: '50%-125px'</code>. Any good ideas, please?</p>