css - 如何使用 CSS 将 UpdateProgress 中心定位到 DIV？

Question

我在用户控件中有一个 UpdatePanel 和 UpdateProgress。

用户控件的位置可以从后端控制。所以需要一个 css 使 ajax-loader.gif 位于我的用户控件的 Div id="main" 的中心。我该如何定位它？

现在，我使用下面的代码......

HTML 呈现：

   <div id="ctl00_ContentPlaceHolder1_ltlsectionRight2">



  <style type="text/css">
 #UpdateProgress1 {
 background-color:#CF4342;
   color:#fff;
   top:0px;
   right:0px;
   position:absolute;
   display:inline;
 }

#UpdateProgress1 img {
   vertical-align:middle;
   margin:2px;
 }
 </style>

<div style="visibility:hidden;display:block;" id="ctl00_ContentPlaceHolder1_GovermentSchemes_UpdateProgress1" role="status" aria-hidden="true">

        <img src="Images/ajax-loader.gif">

    </div>
<div class="title">
    <div class="title-text">
        <div class="title-text-brown">
            Assistance
        </div>
        <div class="title-text-white">
            Schemes</div>
    </div>
</div>
<div id="Main" class="green-box">
    <div class="box-content">
        <table>
            <tbody><tr>
                <td>
                </td>
            </tr>
            <tr>
                <td class="style3">
                    <div id="ctl00_ContentPlaceHolder1_GovermentSchemes_UP1">

                            <select style="width:208px;" id="ctl00_ContentPlaceHolder1_GovermentSchemes_ddlTypes" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$GovermentSchemes$ddlTypes\',\'\')', 0)" name="ctl00$ContentPlaceHolder1$GovermentSchemes$ddlTypes">
            <option value="0" selected="selected">Select Type</option>
            <option value="17">type 1</option>
            <option value="19">type 2</option>

        </select>

    </div>
                </td>
            </tr>
            <tr>
                <td class="style3">
                    <div id="ctl00_ContentPlaceHolder1_GovermentSchemes_UP2">

                            <select style="width:208px;" id="ctl00_ContentPlaceHolder1_GovermentSchemes_ddlSchemes" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$GovermentSchemes$ddlSchemes\',\'\')', 0)" name="ctl00$ContentPlaceHolder1$GovermentSchemes$ddlSchemes">
            <option value="-1">Type is not selected</option>
            <option value="0" selected="selected">Select Scheme</option>

        </select>

    </div>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <div id="ctl00_ContentPlaceHolder1_GovermentSchemes_UP3">

                            <a title="Select Type &amp; Schemes to view." disabled="disabled" id="ctl00_ContentPlaceHolder1_GovermentSchemes_HypView"><img src="uploadedimages/System/Static_Images/search_button.png"></a>

    </div>
                </td>
            </tr>
        </tbody></table>
    </div>
</div>

</div>

---

ASPX 代码：

     <style type="text/css">
     #UpdateProgress1 {
       background-color:#CF4342;
       color:#fff;
       top:0px;
       right:0px;
       position:fixed;
     }

    #UpdateProgress1 img {
       vertical-align:middle;
       margin:2px;
     }
     </style>

    <asp:UpdateProgress ID="UpdateProgress2" runat="server" DynamicLayout="false">
            <ProgressTemplate>
            <div class="progress">
                   <img src="Images/ajax-loader.gif" />  
                    Please Wait...
             </div>
            </ProgressTemplate>
   </asp:UpdateProgress>

    <div id="Main">
    <table> 
                <tr>
                    <td class="style3">
                        <asp:UpdatePanel ID="UP1" runat="server">
                            <ContentTemplate>
                                <asp:DropDownList ID="ddlTypes" runat="server" AutoPostBack="true"  
                                    Width="208px" />
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </td>
                </tr>
                <tr>
                    <td class="style3">
                        <asp:UpdatePanel ID="UP2" runat="server">
                            <ContentTemplate>
                                <asp:DropDownList ID="ddlSchemes" runat="server" Width="208px" AutoPostBack="true"
                                    EnableViewState="true">
                                </asp:DropDownList>
                            </ContentTemplate>
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="ddlTypes" />
                            </Triggers>
                        </asp:UpdatePanel>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <asp:UpdatePanel ID="UP3" runat="server">
                            <ContentTemplate>
                                <asp:HyperLink ID="HypView" runat="server"><img src="uploadedimages/System/Static_Images/search_button.png" /></asp:HyperLink>
                            </ContentTemplate>
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="ddlSchemes" />
                            </Triggers>
                        </asp:UpdatePanel>
                    </td>
                </tr>
            </table>
    </div>