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 a 1-line 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?

Workaround: I actually got this to work by using a table. (I'll probably be cursed to hell by the HTML community.) Is there any significant reason not to use this btw? I'm still interested in the solution using divs though.

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