Angular组件中模态对话框无法覆盖页面的问题求助

大家好，我在开发Angular web应用时碰到了一个模态框的问题，想请教下各位大佬。

我有一个登出表单页面，在某些场景下需要弹出模态对话框来打断用户操作，但现在点击触发按钮后，模态框居然出现在页面底部，没法像预期那样覆盖整个页面内容。

下面是我的组件HTML代码：

<main>
  <p class="question-header">Did you do the thing before signing out?</p>
  <button class="btn btn-lg btn-success w-100" (click)="logout(1)" [disabled]="processing">
    <span *ngIf="processing === 'logout'" class="spinner-grow-sm spinner-grow text-white"></span>
    Yes
  </button>
  <button class="btn btn-lg btn-primary w-100" (click)="logout(-1)" [disabled]="processing">
    <span *ngIf="processing === 'logout'" class="spinner-grow-sm spinner-grow text-white"></span>
    N/A
  </button>
  <hr class="my-3">
  <!-- This separator is here so our users don't press "No" by mistake. -->
  <button class="btn btn-lg btn-danger w-100" (click)="logout(0)" [disabled]="processing">
    <span *ngIf="processing === 'logout'" class="spinner-grow-sm spinner-grow text-white"></span>
    No
  </button>
  <!-- Trigger Button (this will eventually replace the button above, but is here for testing.) -->
  <button class="btn btn-primary" (click)="openModal(template)">Open Modal</button>
  <!-- Modal Template -->
  <ng-template #template>
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Overlay Modal</h4>
        </div>
        <div class="modal-body">
          This modal should cover the page content.
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" (click)="modalRef?.hide()">OK</button>
        </div>
      </div>
    </div>
  </ng-template>
</main>

对应的SCSS样式代码：

@import '../../../../../../variables.scss';

.question-header {
  font-weight: 300;
  font-size: $h2-font-size;
  padding: 0.5em;
  margin: 0;
}

.question-part-two {
  font-weight: 300;
  font-size: $h4-font-size;
  padding: 0.5em;
  margin: 0;
}

::ng-deep .modal-dialog {
  max-width: 500px;
  margin: 1.75rem auto;
}

::ng-deep .modal-content {
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  padding: 1rem;
}

::ng-deep .modal-header {
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

::ng-deep .modal-footer {
  border-top: none;
  display: flex;
  justify-content: flex-end;
}

我已经给模态框加了modal-dialog-centered类，但还是没解决问题。有没有朋友能帮我看看哪里出问题了，怎么让模态框正确覆盖整个页面呢？

内容来源于stack exchange