モーダルウィンドウを常に画面中央に表示させたい

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="style.css">
6    <title>Model window</title>
7</head>
8<body>
9    <div class="sample1" id="open">
10        <img src="images/taka.png"></p>
11        <div class="mask">
12            <div class="caption">It's fresh !</div>
13        </div>
14    </div> 
15
16    <div id="mask" class="hidden"></div>
17
18    <section id="modal" class="hidden">
19        <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
20        <div id="close">
21            閉じる
22        </div>
23    </section>
24
25
26    <script src="js/main.js"></script>
27</body>
28</html>

CSS
1body {
2    height: 1000px;
3}
4
5.sample1 {
6    overflow: hidden;
7    position: relative;
8    width: 500px;
9    height: 500px;
10}
11
12.sample1 .caption {
13    font-size: 30px;
14    text-align: center;
15    padding-top: 235px;
16    color: white;
17}
18
19.sample1 .mask {
20    width: 100%;
21    height: 100%;
22    position: absolute;
23    top: 0;
24    left: 0;
25    opacity: 0;
26    background-color: rgba(0, 0, 0, 0.4);
27    -webkit-transition: all 0.2s ease;
28    transition: all 0.2s ease;
29}
30
31.sample1:hover .mask {
32    opacity: 1;
33}
34
35#open {
36    cursor: pointer;
37}
38
39#close {
40    cursor: pointer;
41    width: 200px;
42    border: 1px solid #ccc;
43    border-radius: 4px;
44    text-align: center;
45    padding: 12px 0;
46    margin: 16px auto 0;
47}
48
49#mask {
50    background: rgba(0, 0, 0, 0.4);
51    position: fixed;
52    top: 0;
53    bottom: 0;
54    right: 0;
55    left: 0;
56}
57
58#modal {
59    background: #fff;
60    width: 300px;
61    padding: 20px;
62    border-radius: 4px;
63    position: absolute;
64    top: 40px;
65    left: 0;
66    right: 0;
67    margin: 0 auto;
68    transition: transform 0.4s;
69}
70
71#modal > p {
72    margin: 0 0 20px;
73}
74
75#mask.hidden {
76    display: none;
77}
78
79#modal.hidden {
80    transform: translate(0, -500px);
81}

JavaScript
1"use strict";
2
3{
4    const open = document.getElementById("open");
5    const close = document.getElementById("close");
6    const modal = document.getElementById("modal");
7    const mask = document.getElementById("mask");
8
9    open.addEventListener("click", () => {
10        modal.classList.remove("hidden");
11        mask.classList.remove("hidden");
12    });
13
14    close.addEventListener("click", () => {
15        modal.classList.add("hidden");
16        mask.classList.add("hidden");
17    });
18
19    mask.addEventListener("click", () => {
20        modal.classList.add("hidden");
21        mask.classList.add("hidden");
22    });
23}