How to position the UpdateProgress center to DIV using CSS? - css

Question

I have a UpdatePanel and UpdateProgress inside a User Control.
The position of usercontrol can be controlled from the backend. So need a css which makes the ajax-loader.gif is positioned center to the Div id="main" of my usercontrol. How can i position it ?
Right now, i use the below code...
HTML Rendered :
<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 & 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 Code :
<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>