The advantages and disadvantages of 5 methods of organizing CSS to achieve vertical centering

Method One

This method sets the display of some div as a table, so we can use the Vertical-alignproperty property of the table.

<divid= "wrapper" >

<divid= "Cell" >

<divclass= "Content" >

Contentgoeshere</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:
InternetExplorer (or even Ie8beta) is invalid, many nested tags (in fact not so bad, another topic)

Method Two:

This method uses the absolutely positioned DIV to set its top to the 50%,topmargin 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.

<divclass= "Content" >

Contentgoeshere</div>

#content {

Position:absolute;

top:50%;

height:240px;

margin-top:-120px;/*negativehalfoftheheight*/

}

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 divheight:50%;margin-bottom:-contentheight;.
The content clears the float and is displayed in the middle.

<divid= "Floater" ></div>

<divid= "Content" >

Contenthere

</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, it is not able to and from top to bottom both spacing is 0, so Margin:auto, will make it center. Using Margin:auto; it is easy to center the block-level elements vertically.

<divid= "Content" >

Contenthere</div>

#content {

Position:absolute;

top:0;

bottom:0;

left:0;

right:0;

Margin:auto;

height:240px;

width:70%;

}

Advantages:
Simple

Disadvantages:
Invalid in IE (Ie8beta)
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.

<divid= "Content" >

Contenthere</div>

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

Advantages:
Applies to all browsers
is not truncated when there is not enough space

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

This method is useful for small elements, such as centering the button text or single-line text.