title: How to display loading.gif at the center of the screen which has a scrollbar
body: <p>I am trying to display loading.gif/spinning wheel whenever a user clicks the button.
  I have added a div as below in the master page: </p>
  
  <pre><code>&lt;div id="loadingDiv"&gt;
      &lt;div&gt;
          &lt;h7&gt;Please wait...&lt;/h7&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the css:</p>
  
  <pre><code>#loadingDiv{
    position:absolute;
    top:0px;
    right:0px;
    width:100%;
    height:100%;
    background-color:#666;
    background-image:url('ajax-loader.gif');
    background-repeat:no-repeat;
    background-position:center;
    z-index:10000000;
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
  }
  </code></pre>
  
  <p>When I try this, the loading.gif is displayed at the center of the page. But as the page is really long , I have to scroll in order to see the loading.gif.</p>
  
  <p>How can I display the loading.gif at the center of the screen which is visible?
  And if I scroll down, I should see that again at the center of the screen.</p>