DIV 居中

方法1： 

<style type="text/css">
            .LoadCenterProgress
            {
             height: 25px;
             width: 300px;
             background-color: #FAD163;
             line-height: 25px;
             color: #00C;
             
             text-align:center;   
             position:absolute;              
             top:50%;
             left:50%;
             margin-top:-13px;
             margin-left:-150px;
            }
        </style>

 

                <div class="LoadCenterProgress" id="progressDiv" >
                    Load ...
                </div>

 

原理：  margin-left = -width/2

方法2：

 .LoadCenterProgress2
            {
             height: 25px;
             width: 300px;
             background-color: #FAD163;
             line-height: 25px;
             color: #00C;
             
             text-align:center;   
             position:absolute;
             left:expression((this.parentElement.offsetWidth-this.offsetWidth)/2);
             top:expression((this.parentElement.offsetHeight-this.offsetHeight)/2);
            }

优点：动态计算width/2, 此方法好像在Popup中会无效？

 

附带UpdatePanel的用法：

<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                <div class="LoadCenterProgress" id="progressDiv" >
                    Shipping ...
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
  <asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="always">
            <ContentTemplate>

some html

           </ContentTemplate>

</asp:UpdatePanel >