How to vertically align a logo on a mobile webpage

I am trying to vertically align a coming soon logo, but not having any luck.

My code is below.

html        {width:100%;height:100%;background:url(images/bg.jpg) repeat #a3a4a6;}
body        {width:100%;height:100%;margin:auto;padding:0px;font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#423932;overflow:hidden}
#container  {width:100%;h开发者_开发知识库eight:100%;margin:auto;background:url(images/top_bg.jpg) no-repeat top center;vertical-align:middle;}
#logo       {margin:auto;background:url(images/logo.png) no-repeat top center; line-height:50px;}

Any feedback would be appreciated.

---

Give your #logo a height and I think it should do what you want... if I understand your code.

Example: http://jsfiddle.net/jasongennaro/whxVY/1/

EDIT

As per your comment

i want it to appear vertically aligned - middle of the page.

In that case, do the following:

1. give your #logo div a height:100% and

2. position the background-image as center center

   #logo {
       margin: auto;
       background: url(images/logo.png) no-repeat center center;
       height: 100%;
   }