title: Overlay with centered/vertically aligned message
body: <p>I would like to make an overlay on my site to prevent user from clicking somewhere. It's sometimes very handy. In the middle of the overlay I want to place a message like "please wait.." or "loading...".</p>
  
  <p>I've made a <code>div</code>, which covers the whole screen and a span inside of it, which contains the message. I managed to center the <code>span</code> inside the <code>div</code> horizontally, but I'm struggling with the vertical alignment of it. The message should be also vertically centered.</p>
  
  <p>Here is my code so far:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="overlay"&gt;
      &lt;span&gt;Please wait...&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: #000;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
  }
  
  #overlay span {
      padding: 5px;
      border-radius: 5px;
      color: #000;
      background-color: #fff;
  }
  </code></pre>
  
  <p>Here is the <a href="http://jsfiddle.net/alexxus/kaJSs/" rel="nofollow">jsfiddle</a>.</p>
  
  <p>So, how do I get the span with the message vertically centered?</p>