I have a div with a background image that needs to be centered horizontally and vertically. On top of that image, I also want to display some text, also centered horizontally and vertically.

I managed to get the image centered, but the text is not centered vertically. I thought vertical-align:middle would do the trick.

Here's the code I have:

<div style="background: url('background.png') no-repeat center; width:100%; height:100%; text-align:center;">
   <div style="color:#ffffff; text-align: center; vertical-align:middle;" >
       Some text here.
   </div>
</div>

Any ideas?