vertical center css

content from http://blog.themeforest.net/tutorials/vertical-centering-with-css/

In this method, we will insert a div above the content element. This will be set to height:50%; and margin-bottom:-contentheight;. The content will then clear the float and end up in the middle.

<div id="floater">
<div id="content">
 Content here
</div>
</div>

#floater {float:left; height:50%; margin-bottom:-120px;}
#content {clear:both; height:240px; position:relative;}

THE GOODS

• Works in all browsers
• When there isn’t enough space (ie. the window shrinks) our content will not be cut off, and a scrollbar will appear.

THE BADS

• Only one I can think of is that it requires an extra empty element (which isn’t that bad, another subjective topic)