CSS solves the problem of unknown height vertical centering _css/html

In addition to the special instructions, the content of this site using Creative Commons authorized signature and non-commercial use, please respect the fruits of labor.

Original title: Vertical centering in CSS

Subtitle: Yuhu ' s definitive solution with Unknown Height

Translation: Forestgan

Despite the vertical-align features of CSS, it is not possible to solve the problem of vertical centering of unknown heights (in the case of text or pictures with unknown height in a div tag).

Standard browsers such as Mozilla, Opera, Safari, etc., you can set the parent element display as table (display:table;) and the inner child element as Table-cell (Display:table-cell). The Vertical-align feature makes it vertically centered, but non-standard browsers are not supported.

A non-standard browser can only be set to the top of the child element 50%, the inside of a set of elements from the top 50% to offset.

Css
body {padding:0; margin:0;}
body,html{height:100%;}
#outer {height:100%; overflow:hidden; position:relative;width:100%; background:ivory;}
#outer [id] {display:table; position:static;}
#middle {position:absolute; top:50%;}/* for explorer only*/
#middle [id] {display:table-cell; vertical-align:middle; position:static;}
#inner {position:relative; top: -50%;width:400px;margin:0 auto;}/* for Explorer only */
Div.greenborder {border:1px solid green; background-color:ivory;}

Xhtml

The advantages of the above CSS code is no hacks, the use of IE does not support the CSS2 selector #value[id].

CSS2 selector #value[id] is equivalent to the selector #value, but Internet Explorer does not support this type of selector. similarly. Value[class], equivalent to. value, which only the standard browser can read.

Test: Firefox1.5, Opera9.0, IE6.0, IE5.0 Pass.

