The vertical-align property specifies the alignment of text relative to surrounding text and the alignment of table cell content; it cannot be used to vertically align an entire block.
One way to vertically center a block on the page is to make it absolutely positioned, with margin-top and margin-bottom of auto. However, for this to work you also need to specify a non-auto value for "top", "bottom" and "height":
border: solid cyan 1px
border: solid red thin;
<div id="foo">Hello, world!</div>
There does not appear to be any way in CSS to vertically center a block with an automatically determined height. However, I believe that the CSS working group is considering adding "position: center" or some other property for this purpose.