CSS solves the problem of vertical center of unknown height

In addition to special instructions, the content of this site uses the creation and sharing of authorized signatures and non-commercial purposes. Please respect the fruits of labor.

Original article title: vertical centering in CSS

Subtitle: yuhu's definitive solution with unknown height

Translation: forestgan

Despite the vertical-align feature of CSS, it cannot effectively solve the vertical center problem of unknown height (in the case of text or images with unknown heights in a div label ).

Standard browsers such as Mozilla, opera, and safari ., you can set the display mode of parent-level elements to table (display: Table;) and the internal sub-elements to table-cell (display: Table-cell ), vertical-align features are used to center vertices vertically, but non-standard browsers do not.

Non-standard browsers can only set the header to 50% in the child element, and then set another element to offset from the top to 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 above CSSCodeThe advantage is that there is no hacks and css2 selector # value [ID] not supported by IE is used.

Css2 selector # value [ID] is equivalent to selector # value, but Internet Explorer does not support this type of selector. Similarly,. value [Class] is equivalent to. value, which can only be understood by standard browsers.

Test: firefox1.5, opera9.0, ie6.0, and ie5.0 pass.