當使用CSS時，ASP.NET面板不會出現在頁面的中心

我設置了一個彈出窗口，當出現時，禁用背景變暗且部分透明，將窗口留在屏幕中間。然而，窗口出現在頂部，除非我將位置設置爲絕對值並設置'頂部'參數，否則我無法將其移下。問題是彈出式窗口是動態的，無論大小如何，我都希望它能夠居中。有人能幫助我嗎？當使用CSS時，ASP.NET面板不會出現在頁面的中心

這是我的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; 
}

來源

2014-10-02 Alastair W

到這裏看看：http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/不適用 – johnyTee 2014-10-02 10:03:10

CSS到ASP，ASP被轉換爲HTML，這就是呈現的內容，所以直到你向我們提供實際呈現的內容（以HTML的形式），我們如何告訴你什麼影響了它？ – 2014-10-02 10:18:51

感謝johnyTee的解決方案。我在CSS的popup-border-window部分添加了以下內容，並且它可以工作！謝謝。

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

來源

2014-10-02 11:03:33

當使用CSS時，ASP.NET面板不會出現在頁面的中心

回答

相關問題