在中心制作更新进度面板答案

【问题标题】：Making Update Progress Panel in the center在中心制作更新进度面板
【发布时间】：2011-10-10 03:16:21
【问题描述】：

我对更新进度面板有疑问。我想在屏幕中间放置更新进度面板！任何人都可以建议我，这样做的想法是什么？？

【问题讨论】：

【解决方案1】：

系统正在处理时，更新进度面板会显示一些内容（一些文本、图像、一些标记）..

所以你需要使用你添加的标记..

例如，如果你有一个显示的 div，你可以让它像这样在中心..

<div style="width:200px;margin:0 auto;">Processing...</div>

这将在其容器的中心显示 div。

完整示例：

<asp:UpdatePanel ID="updatepnl1" runat="server">
    <ContentTemplate>
        <asp:GridView id="gv1" runat="server">
        </asp:GridView>
        <asp:UpdateProgress id="UpdateProg" runat="server">
            <ProgressTemplate>
                <div style="width:200px;margin:0 auto;">Processing...</div>
            </ProgressTemplate>
        </asp:UpdateTemplate>
    </asp:ContentTemplate>
</asp:UpdatePanel>

当然你应该把 css 放到 css 文件中，然后应用到一个类中。

喜欢：

///Start css

.posCentre{width:200px;margin:0 auto;}

///End css

并将您的 div 更改为：

<div class="posCentre">Processing...</div>

【讨论】：

@davMcLean：谢谢 4 你的回复！！
别担心，希望对您有所帮助。

【解决方案2】：

你可以通过使用 css 来做到这一点

<style type="text/css" media="screen">
/* commented backslash hack for ie5mac \*/ 
html, body{height:100%;} 
/* end hack */
.CenterPB{
position: absolute;
left: 50%;
top: 50%;
margin-top: -30px; /* make this half your image/element height */
margin-left: -30px; /* make this half your image/element width */
}
</style>

你在 div 中有进度条

<div class="CenterPB" style="height:60px;width:60px;" >Progress bar here</div>

参考：
http://www.sitepoint.com/forums/1243542-post9.html
http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/

【讨论】：

【解决方案3】：

如果你使用jQuery，你也可以试试（非常轻量级）fixedcenter plugin。

【讨论】：