爲什麼彈出窗口出現在底部而不是居中？

Question

我有一個圖像裏面的ajax模式擴展。它在GridView中單擊按鈕時成功顯示，但圖像默認滾動到頁面的右下角，只有在按下鍵盤上的箭頭時纔會居中。爲什麼？如何將它置於默認中心？

<asp:ModalPopupExtender ID="mdlMessageBox" BackgroundCssClass="modalBackground" runat="server" TargetControlID="hdnField1" 

<asp:ImageButton ID="ImageLetterCopy" OnClick="ImageLetterCopy_Click" style="max-width: 100%;max-height: 100%" runat="server" /> 

CSS

<style type="text/css"> 
     .modalBackground { 
      background-color: Black; 
      filter: alpha(opacity=90); 
      opacity: 0.8; 
     } 

     .modalPopup { 
      background-color: whitesmoke; 
      border-width: 0px; 
      border-style: solid; 
      border-color: black; 
      padding-top: 10px; 
      padding-left: 10px; 
      padding-right: 10px; 
      /*width: 600px; 
      height: 280px;*/ 
     } 
    </style> 

Answer 1

爲.modalPopup添加這些：

.modalPopup { 
    background-color: whitesmoke; 
    border-width: 0px; 
    border-style: solid; 
    border-color: black; 
    padding-top: 10px; 
    padding-left: 10px; 
    padding-right: 10px; 
    /* Additions */ 
    position: absolute; 
    left: 25%; 
    right: 25%; 
    top: 25%; 
    bottom: 25%; 
} 

Answer 2

與柔性佈局

試試這個

.modalBackground { 
background-color: Black; 
filter: alpha(opacity=90); 
opacity: 0.8; 
display: flex; 
align-items: center; 
justify-content: center; 
} 

.modalPopup{padding: 10px; max-width: 360px;}