CSS to solve unknown height vertical center problem _css/html

In addition to the special note, the content of this site using the 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 does not effectively solve the problem of vertical centering of unknown heights (in the case of a DIV tag with an unknown height of text or a picture).

Standard browsers such as Mozilla, Opera, Safari, etc., you can set the parent element display to table (display:table;), the inner child element is Table-cell (Display:table-cell), It is centered vertically by the vertical-align attribute, but is not supported by a nonstandard browser.

Non-standard browsers can only be set from the top 50% in the child element, which is offset by a set of elements from the top-50%.

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 advantage of the CSS code above is that there is no hacks, using IE does not support CSS2 selector #value[id]. The

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

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