Dynamically Centering the Update Progress Gif

Question

I'm using the Ajax updateprogress and I attached a loading gif, the problem is that how can i force the loading.gif to be in the center of the screen even if your in the very bottom / top of the page? is there a way to make it appear in the center always? I want the user to see the loading gif in the center always for them to be notified that the page is still loading..

.CenterPB
    {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -20px; /* make this half your image/element height */
        margin-left: -20px; /* make this half your image/element width */
        width:auto;
        height:auto;
    }

   <asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="false">
    <ProgressTemplate>
        <div class="CenterPB" style="height: 40px; width: 40px;">
            <asp:Image ID="Image1" runat="server" ImageUrl="~/App_Themes/Default/images/progressbar1.gif"
                Height="35px" Width="35px" />
            Loading ...
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

Thanks!

Answer 1

I'm assuming you want it stay put in the middle, even when scrolling. Then you would have to change:

    position: absolute;

in

    position: fixed;

Answer 2

position: fixed; should do the trick, that way the loading image will stay fixed to the browser window so if the user scrolls the image will stay centered to the browser, not the page.

demo: http://jsbin.com/ifimek/edit#javascript,html,live (try scrolling obviously)