CSS to achieve perfect vertical center

CSS

I've seen a lot of people ask this question all the time, but I did not when the same thing, because in the CSS to the vertical center, mostly in the case of height, or the container is highly variable under the circumstances to use, looks more comfortable, and the implementation of a lot of methods, not necessarily adhere to the same as table layout. But a few examples have recently been asked, and there seems to be a lot of demand for it. Now take my experience and share it, and I hope everyone will clap.

First of all, to have a concept: all table layout can be implemented, CSS must be achieved . CSS can be implemented, the table may not be able to do.

Here are a few examples:

One, the single line content center
Only consider a single line is the simplest, whether or not to the container fixed height, as long as the container set line-height and height, and make the two values equal, plus over-flow:hidden on the

. middle-demo-1{


Height:4em;


Line-height:4em;


Overflow:hidden;


}

Advantages:
1. Support both block-level and inline-polar elements
2. Support all browsers
Disadvantages:
1. Only one row can be displayed
2. IE does not support the center of , etc.
To be aware of:
1. Use relative height to define your height and line-height
2. Don't want to ruin your layout, Overflow:hidden must
Why?

Two, multiple lines of content centered, and container height variable
It's also very simple, give the same padding-bottom and Padding-top.

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

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

Third, the container as a form cell
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 plus vertical-align:middle, just like the valign= "center" in the table.

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

Unfortunately, IE does not support these properties, but it works perfectly on other browsers.
Note that the Display:table-cell element must appear as a descendant of display:table elements, as well as a legal <td> element must be in <table>.

Advantages:
Needless to say, the table, the effect is exactly the same as the table.
Disadvantages:
Invalid IE under

Four, poison the fire! Using IE bugs to solve the absolute center in IE
First have to say, IE really is a bad browser, CSS1 in the definition is not supported, we have to turn a big circle to create a center. However, as I said, General table layout can be achieved, CSS can be achieved , even in IE is no exception. I have studied IE layout mode for many years, or found a way to be absolutely centered in IE. This method is based on IE layout bug, also can calculate the poison. As for the principle, do not ask me, this is a secret study, not to mention words also speak not clear, 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;
}

Five, consolidate three and four, write out support for all browsers vertical center container!
The idea is to use IE and non IE browser CSS hack, integration of three and four of CSS, write compatible with the mainstream browser vertical center container. The specific code is not given, everyone right as practice practice. Examples can be found in the appendix below.
Final Test supported browsers: ie6+, Mozilla 1.7, Netscape Navigator 8, Opera 8.0+, Firefox 1.0+ and Safari 1.0+ie5 need to add a correction to the appropriate model.
Presumably supported browsers: Mozilla 1.5+, Netscape Navigator 7+, Opera 7+
Browser not tested: Konqueror