動態地集中更新進度Gif

Question

我正在使用Ajax updateprogress，我附加了一個加載gif，問題是我如何強制加載gif在屏幕的中心，即使你在最底部/頁面頂部？有沒有辦法讓它始終出現在中心？我希望用戶在中心看到加載gif始終爲他們通知網頁仍在加載..

.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> 

謝謝！

Answer 1

我假設你想讓它留在原地在中間，滾動時也是如此。然後，你將不得不改變：

position: absolute; 

在

position: fixed; 

Answer 2

position：fixed;應該這樣做，這樣加載圖像將保持固定到瀏覽器窗口，所以如果用戶滾動圖像將保持居中到瀏覽器，而不是頁面。

演示：http://jsbin.com/ifimek/edit#javascript,html,live（試行顯然滾動）