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)