css - 使用 CSS 时，ASP.NET 面板未出现在页面中央

Question

我已经设置了一个弹出窗口，当它出现时，禁用背景变暗并且部分透明，将窗口留在屏幕中间。但是，窗口出现在顶部，除非我将位置设置为绝对位置并设置“顶部”参数，否则我无法将其向下移动。问题是弹出窗口是动态的，无论大小如何，我都希望它居中。

这是我的 aspx 代码:

<!-- Popup window -->
   <asp:Panel ID="popupWindow" CssClass="popup-window" Visible="false" runat="server">
      <asp:Panel CssClass="popup-border-window" runat="server">
         <asp:Panel CssClass="popup-container" runat="server">
            <asp:Panel CssClass="popup-content" runat="server">
               <asp:Panel id="myMessageBox" runat="server">            
                  <asp:Panel CssClass="popup-close-button" runat="server"><asp:ImageButton ID="imgPopupClose" ImageUrl="~/img/close.png" width="28" height="28" runat="server" /></asp:Panel>
                     <asp:Literal ID="litPopup" runat="server"></asp:Literal>        
                  </asp:Panel>
               </asp:Panel>
            </asp:Panel>
        </asp:Panel>
    </asp:Panel>

这是 CSS:

/*Popup*/
.popup-window {
    position: absolute;
    top:0px;
    left:0px;
    z-index: 998;
    height: 100%;
    width: 100%;
    background-image: url(../img/backgroundFlyBox.png);
    display: block;

}

.popup-border-window {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
    border-radius:12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    padding: 12px;

}

.popup-container {
    background-color:white;
    position: relative;
    border:10px solid #7A838B;
    border-radius:20px;
    padding:20px;
    max-width:50%;
    max-height:50%;
    margin:0 auto;
}

Answer 1

感谢 johnyTee 提供的解决方案。我将以下内容添加到 CSS 的 popup-border-window 部分，效果很好!谢谢。

position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);