10.14 如何实现一个居中弹出的窗口？

    <h1>如何实现一个居中弹出的窗口？</h1>


    <div id="panel1" class="panel-mask">
        <div class="panel">
            <style>
                .panel-mask {
                    height: 100%;
                    position: fixed;
                    display: block;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    background-color: rgba(0, 0, 0, 0.78);
                }


                .panel {
                    position: relative;
                    width: 500px;
                    height: 300;
                    background-color: #f9f9f9;
                    transform: translate(50%, 50%);
                    padding: 20px;
                    border-radius: 5px;
                    box-shadow: 5px 5px 20px 10px rgba(0, 0, 0, .5);
                }


                .close-btn {
                    position: absolute;
                    right: 20px;
                    background-color: grey;
                    width: 20px;
                    text-align: center;
                    cursor: pointer;
                    line-height: 18px;
                    color: snow;
                    user-select: none;
                    border-style: outset;
                    border-width: 2px;
                }
                .close-btn:hover{
                    /* translate: scale(2); */
                    background-color: silver;
                    color: black;
                }
                .close-btn:active{
                    border-style: inset;
                }
            </style>
            <script>
                function popupPanel() {
                    $("#panel1").css("display", "block")
                }
                function closePanel() {
                    $("#panel1").css("display", "none")
                }
            </script>
            <div class="close-btn" onclick="closePanel()">×</div>
            <h3 style="margin-bottom: 15px;">标题</h3>
            <p>文本描述</p>
        </div>
    </div>


    <button onclick="popupPanel()">弹出</button>
    <button onclick="closePanel()">关闭</butt