Html 角度5：无法居中或设置对话框的样式位置

我有一个简单的页面，上面有一个按钮，可以打开一个对话框。不幸的是，它默认在页面上左对齐，但我希望它集中在网页上

以下是app.component.HTML的HTML：

<div class="container">
    <div style="text-align: center; margin-top: 100px">
        <button (click)="popUp()">Pop Up</button>
    </div>
</div>

以下是popupcomponent类的HTML：

<div card-body style="text-align: center">
  <h1>Pop Up</h1>
  <div class="summary-table-wrapper">
    <ag-grid-angular (gridReady)="onGridReady($event)">
    </ag-grid-angular>
  </div>
</div>

弹出

---

如何将弹出对话框居中放置在网页的正中间？我几乎什么都试过了

您是否在弹出窗口中尝试了position:absolute？我是将其放在组件本身中，还是放在dialogRef中？

<div card-body style="text-align: center">
  <h1>Pop Up</h1>
  <div class="summary-table-wrapper">
    <ag-grid-angular (gridReady)="onGridReady($event)">
    </ag-grid-angular>
  </div>
</div>