title: Angular 5: Unable to center or style location of MatDialog box
body: <p>I have a simple page with a button that should open a MatDialog box. Unfortunately, it defaults to being left aligned on the page, but I want it centered on the webpage. </p>
  
  <p>Here is the HTML for app.component.html:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div style="text-align: center; margin-top: 100px"&gt;
          &lt;button (click)="popUp()"&gt;Pop Up&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the popUp function in app.component.ts:</p>
  
  <pre><code>popUp() {
      const dialogRef = this.dialog.open(PopUpComponent, {
        disableClose: false,
        hasBackdrop: true,
        backdropClass: '',
        width: '250px',
        height: '',
        position: {
          top: '',
          bottom: '',
          left: '',
          right: ''
        }
      });
    }
  </code></pre>
  
  <p>And here is the HTML for the popupcomponent class:</p>
  
  <pre><code>&lt;div card-body style="text-align: center"&gt;
    &lt;h1&gt;Pop Up&lt;/h1&gt;
    &lt;div class="summary-table-wrapper"&gt;
      &lt;ag-grid-angular (gridReady)="onGridReady($event)"&gt;
      &lt;/ag-grid-angular&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I center the PopUp dialog box in the direct middle of my webpage? I have tried almost everything. </p>