Display Ajax UpdateProgress in the middle of the Page

Question

I am using the Ajax UpdateProgress control. Though it is working just as I expected it to work, I want it to appear at the center of the page. How do I do that

<asp:UpdateProgress runat="server"
      id="PageUpdateProgress" DisplayAfter=0
      DynamicLayout=true>
   <ProgressTemplate>
      <div>
         <img src="../Images/load.gif" />           
     </div>
   </ProgressTemplate>
</asp:UpdateProgress>

Answer 1

Thanks Jaidev, Very handy post!

It can take a while to get the css just right, so just to simplify the solution for everyone else, you only need the following (for updateprogress middle-positioning):

<div style="position:absolute; width:100%;height:100%;"></div>

and for the image:

<img style="position:relative; top:45%;" />