3 ways to achieve vertical centering with CSS

It's not easy to use CSS to center vertically. Some methods are not valid in some browsers. Let's look at the 3 different methods that make objects vertical, and their pros and cons
Method One:

This method sets the display of some div as a table, so we can use the Vertical-align property properties of the table.
<div id= "wrapper" >
<div id= "Cell" >
<div class= "Content" >
Content goes here</div>
</div>
</div>
#wrapper {display:table;}
#cell {Display:table-cell; vertical-align:middle;}

Advantages:
Content can dynamically change the height (not defined in CSS). Content is not truncated when there is not enough space in the wrapper
Disadvantages:
Invalid in Internet Explorer (or even IE8 beta), many nested tags (actually not so bad, another topic)

Method Two:

This method uses the absolutely positioned DIV to set its top to the 50%,top margin set to the negative content height. This means that the object must specify a fixed height in the CSS.
Because there is a fixed height, you may want to specify Overflow:auto for the content so that if there is too much content, the scroll bar will appear, lest the content overflow.
<div class= "Content" >
Content goes here</div>
#content {
Position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* Negative half of the height * *
}

Advantages:
Applies to all browsers
No nested tags required
Disadvantages:
When there is not enough space, the content disappears (like a div within the body, when the user shrinks the browser window, the scroll bar does not appear)

Method Three:

This method inserts a div outside the content element. Set this div height:50%; Margin-bottom:-contentheight;.
The content clears the float and is displayed 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;}

Advantages:
Applies to all browsers
Content is not truncated when there is not enough space (for example: shrinking the window), scroll bars appear