Overlay with centered/vertically aligned message - html

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?

Answer 1

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

Answer 2

Besides that if the Center object is bigger in height & width, you can give negative margins exactly half of the same.
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background-color: #000;enter code here
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
#overlay span {
padding: 5px;
border-radius: 5px;
color: #000;
background-color: #fff;
height:100px;
width:100px;
position:absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
display:block;
}