Overlay with centered/vertically aligned message

Question

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

I've made a div, which covers the whole screen and a span inside of it, which contains the message. I managed to center the span inside the div horizontally, but I'm struggling with the vertical alignment of it. The message should be also vertically centered.

Here is my code so far:

HTML:

<div id="overlay">
    <span>Please wait...</span>
</div>

CSS:

#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;
}

Here is the jsfiddle.

So, how do I get the span with the message vertically centered?

Solution

LIke this

DEMO

add below select in position:relative or top:50%;

CSS

#overlay span {
    padding: 5px;
    border-radius: 5px;
    color: #000;
    background-color: #fff;
    position:relative;
    top:50%;
}