javascript - Why does a popup appear at bottom instead of being in center? -

i have image inside ajax modal extender. appears when button clicked inside gridview image scrolled right bottom of page default , comes center when press down arrow on keyboard. why ? how put in center default ?

<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> 

add these .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%; }