I am trying to make a modal from scratch without using bootstrap or similar libraries. Here is my `css`:

```css
.modal-background {
  position: fixed;
  z-index: 2147483645;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.2);
}

.modal-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.modal-container .card {
  z-index: 2147483646;
}
```

```html
<div class="modal-background"></div>
<div class="modal-container">
  <div class="card shadow">
    <div class="card-body">
      content goes here
    </div>
  </div>
</div>
```

The modal works perfectly when it is being overlayed on a web page which doesn't extend past 100% of the viewport. In other words if the page is short enough to not require scrolling then the modal displays in the center of the screen correctly.

What I am trying to figure out is how to always have the modal displayed in the center of the screen even when overlayed on a page that is long, ie: the user has scrolled down to the bottom of a page and then the modal is displayed.

Currently if the user has already scrolled to the bottom of a long page and then I display the modal, it is displayed at the top of the page out of sight from the user. How do I display it in the center of the screen so the user sees it no matter how long the page is?

ps. I am using `Vue.js` to show/hide the modal. So all I'm asking about is the presentation/layout of the modal.