Question

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

这是我的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%);

使用CSS时，ASP.NET面板不会出现在页面的中心

1 个答案: