CSS to resolve unknown height div Vertical Center

css| Solution

Original title: Vertical centering in CSS
subtitle: Yuhu ' s definitive Solution with Unknown Height

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

<div id= "outer" >
<div id= "Middle" >
<div id= "inner" class= "Greenborder" >
</div>
</div>
</div>

The advantages of the above CSS code is no hacks, using IE not supported by the CSS2 selector #value[id].

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.