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;