title: Mootools spinner center screen
body: <p>I have put a mootools Spinner (from the More library) on my website. The spinner sits in the body of my webpage, and appears when the user does a search (which uses ajax). The spinner graphic appears at the center of the body element - so, halfway down the page. This doesn't look good if the page is longer than one screen.</p>
  
  <p>I initialize the spinner like this:</p>
  
  <pre><code>loadingSpinner = new Spinner(document.body,{message:"Fetching results..."});
  </code></pre>
  
  <p>For now, I'm just using the default css, like this:</p>
  
  <pre><code>.spinner {
      position: absolute;
      opacity: 0.9;
      filter: alpha(opacity=90);
      -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
      z-index: 999;
      background: #fff;
  }
  .spinner-msg {
      text-align: center;
      font-weight: bold;
  }
  
  .spinner-img {
      background: url(img/spinner.gif) no-repeat;
      width: 24px;
      height: 24px;
      margin: 0 auto;
  }
  </code></pre>
  
  <p><code>.spinner-msg</code> and <code>spinner-img</code> (which I want to center) both sit inside <code>.spinner-content</code>, so I tried doing this in this css:</p>
  
  <pre><code>.spinner-content {
      position:fixed;
      top:50%;
      left:50%;
  }
  </code></pre>
  
  <p>But it didn't do anything. I confirmed the the <code>.spinner-content</code> element was correctly receiving that css, so I assume the spinner internally uses some javascript to position the spinner instead.</p>
  
  <p>How do I get the spinner to appear in the center of the screen?</p>