Vertical center with CSS

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>
</Div>

# Floater {float: left; height: 50%; margin-bottom:-120px ;}
# Content {clear: both; height: 240px; position: relative ;}

Advantages:

Applicable to all browsers
Content is not truncated when there is not enough space (for example, window narrowing), and the scroll bar appears

Disadvantages:

The only thing I can think of is the need for additional null elements (not that bad, but another topic)

Method 4

This method uses a position: 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%;
}

Advantage: Simple

Disadvantages:

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