CSS to achieve vertical center 5 ways

Using 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= "Wrappers" >
<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 wrappers

Shortcomings：

Invalid in Internet Explorer (or even IE8 beta), many nested tags (actually not that 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

Shortcomings：

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

Shortcomings：

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 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; Makes 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%;
}

Advantages: Simple

Shortcomings：

Invalid IE (IE8 beta)
When there is not enough space, the content is truncated, but no scroll bars appear

Method Five

This method can only place single-line text in. Simply set the line-height to the height value of that object to make the text centered.

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

#content {height:100px; line-height:100px;}

Advantages：

Applies to all browsers
Not truncated when there is not enough space

Shortcomings：

Valid only for text (block-level elements are not valid)
It's a bad word when you have more rows.