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

I have an image inside ajax modal extender. It appears successfully when a button is clicked inside gridview but the image is scrolled to the right bottom of page by default and only comes to center when i press down arrow on keyboard. Why ? How to put it in center by 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

<styletype="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>