Using CSS to achieve a vertical centering method

The use of CSS to achieve the vertical center of objects There are many different ways, it is difficult to choose the right method. Let me explain the good way I see it and how to create a good center site.
It's not easy to use CSS to center vertically. Some methods are not valid in some browsers. Let's look at the 5 different methods that make objects vertical, and their pros and cons. (Take a look at the test page for a short explanation.) )
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>
<div id= "Content" >
Content here
</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
Disadvantages:
The only thing I can think of is the need for extra empty elements (it's not that bad, it's another topic)
Method Four
This method uses a Position:absolute, with a fixed width and height of the div. This div is set to top:0; bottom:0;. But because it has a fixed height, actually can not and up and down both spacing is 0, so margin:auto; will make it center. Using Margin:auto; it is easy to center the block-level elements vertically.
<div id= "Content" >
Content here</div>

#content {
Position:absolute;
top:0;
bottom:0;
left:0;
right:0;
Margin:auto;
height:240px;
width:70%;