CSS for vertical centering

One, the center of the single-line content
Consider only one row is the simplest, regardless of whether the container fixed height, as long as the container set line-height and height, and make two values equal, plus Over-flow:hidden can be

. middle-demo-1{
Height:4em;
Line-height:4em;
Overflow:hidden;
}

Advantages:
1. Supports both block-and inline-pole elements
2. Support all browsers
Disadvantages:
1. Only one row can be displayed
2. The center of etc. is not supported in IE
It is important to note that:
1. Use relative height to define your height and line-height
2. Don't want to ruin your layout, Overflow:hidden must
Why?
Please compare the following two examples:

<p style= "background: #900; Color: #00f; Font:bold 12px/24px Helvertica,arial,sans-serif; height:24px; width:370px; " >lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<br/>
<br/>
<p style= "background: #090; Color: #00f; Font:bold 12px/2em Helvertica,arial,sans-serif; Height:2em; width:370px; Overflow:hidden; " >lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

The last height is the absolute unit px, and there is no hidden overflow, the next height is in relative unit em, and the overflow is hidden. If your browser supports zooming in, zoom in on the font to see what happens.

Two, multi-line content center, and container height variable
Also very simple, give the consistent padding-bottom and padding-top on the line

. middle-demo-2{
padding-top:24px;
padding-bottom:24px;
}

Advantages:
1. Supports both block-and inline-pole elements
2. Support for non-textual content
3. Support all Browsers
Disadvantages:
Container cannot be fixed height

Third, the container as a table unit
CSS provides a range of Diplay property values, including Display:table, Display:table-row, Display:table-cell, and so on, to display elements as table cells. This is combined with vertical-align:middle, just like the valign= "center" in the table.

. middle-demo-3{
Display:table-cell;
height:300px;
Vertical-align:middle;
}

Unfortunately, IE doesn't support these properties, but it works perfectly on other browsers.
It is important to note that the Display:table-cell element must appear as a descendant of the display:table element, as is the case with a legal <td> element that must be in the <table>.

Advantages:
Needless to say, it's the table, and the effect is exactly the form.
Disadvantages:
Invalid under IE

Four, like cures like! Using IE bug to solve the absolute center in IE
First have to say, IE really is a very bad browser, CSS1 in the definition are not supported, so we have to turn a big circle to build the center. But like I said, the table layout can be implemented, CSS must be implemented , even in IE is no exception. I studied IE layout mode for many years, or found a method that can be absolutely centered in IE. This method is based on IE layout bug, also can calculate like cures like. As for the principle, do not ask me, this is a secret science, not to mention few words also speak unclear, as long as the use of the line

.middle-demo-4 {
height:300px;
Position:relative;
}
. middle-demo-4 div{
Position:absolute;
top:50%;
left:0;
}
. middle-demo-4 div div{
position:relative;
Top:-50%;
left:0;
}