Angular MatDialog 显示在页面底部

如何解决Angular MatDialog 显示在页面底部

我在一个有角度的网站上工作，我想在单击按钮时显示一个垫子对话框在入口组件中

 openDialog() {
    let dialogRef = this.dialog.open(MoreDetailsComponent,{
      height: '400px',width: '600px',});
  }
}

这就是我打开对话框的方式

<h1 mat-dialog-title>Hi </h1>
<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <mat-label>Favorite Animal</mat-label>
    <input matInput >
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button >No Thanks</button>
  <button mat-button  cdkFocusInitial>Ok</button>
</div>

这是对话框 enter image description here 这是弹出窗口的显示方式 enter image description here