Several methods for implementing vertical center using CSS

Recently, I found some methods for implementing vertical center in CSS on the Internet. There are many methods. I can see several good methods here to illustrate that it is not easy to implement vertical center using CSS. Some methods are invalid in Some browsers. Therefore, you need to check which method is best.

Method 1:

In this methodSet display mode to tableSo we can useVertical-align PropertyAttribute.

 
<Div id = "wrapper"> <Div id = "cell"> <Div class = "content"> content goes here </div> # wrapper {display: table ;}# cell {display: Table-cell; Vertical-align: middle ;}
 

Advantage: content can dynamically change the height (not defined in CSS ). Content is not truncated when there is not enough space in wrapper;

Disadvantage: many nested labels are invalid in Internet Explorer (or even IE8 beta.

Method 2:

Use this methodAbsolute PositioningDiv, put itsTop 50%,Top margin is set to negative content height.. This means that the object must specify a fixed height in CSS.

Because there is a fixed height, you may want to specify overflow: auto for content, so that if there is too much content, a scroll bar will appear to avoid content overflow.

 
<Div class = "content"> content goes here </div> # Content {position: absolute; top: 50%; Height: 240px; margin-top:-120px; /* negative half of the height */}
 

Advantage: Applicable to All Browsers without nested tags

Disadvantage: when there is not enough space, the content will disappear (similar to the case where the DIV is in the body and the browser window is reduced by the user, the scroll bar does not appear)

Method 3:

This method inserts a div outside the content element. Set the DIV Height: 50%; margin-bottom:-contentheight ;.

Content is cleared and displayed in the middle.

 
<Div id = "floater"> <Div id = "content"> content here </div> # floater {float: Left; Height: 50%; margin-bottom:-120px;} # Content {clear: Both; Height: 240px; position: relative ;}
 

Advantage: Suitable for all browsers, content is not truncated when there is not enough space (for example, window narrowing), and the scroll bar appears

Disadvantage: The only thing I can think of is the need for additional null elements.

Method 4:

This method usesPosition: absolute, Div with fixed width and height. This div is set to top: 0; bottom: 0 ;. However, because it has a fixed height, it cannot be separated from the upper and lower distances to 0, so margin: auto; will center it. It is easy to use margin: auto; to vertically center block-level elements.

 
<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;

Disadvantage: IE (IE8 beta) is invalid. If there is not enough space, the content is truncated, but no scroll bar appears;

Method 5:

This method can only include a single line of text. Simply putLine-heightTheHeightValue to center the text.

 
<Div id = "content"> content here </div>
 

# Content {Height: 100px; line-Height: 100px ;}
 

Advantage: applicable to all browsers and will not be truncated if there is no sufficient space

Disadvantage: it is only valid for text (Block-level elements are invalid). When multiple rows exist, the word breaking is worse.

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