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.
Copy CodeThe code is as follows:
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
Copy CodeThe code is as follows:
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.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" > <pead> <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <title>vertical centering in valid css</title> <style type=" Text/css "> body { padding:0; margin:0; font-size:75%; line-height:140%; Font-family:arial, Helvetica, Sans-serif;} body,html{height:100%;} a{color: #333;} a:hover{color:green;} #outer {height:100%; overflow:hidden; position:relativ e;width:100%; Background:ivory; } #outer [id] {display:table; position:static;} #middle {position:absolute; top:50%;text-align:center;}/* for explorer only*/#middle [id] {display:table-cell; vertical-align:middle; position:static;} #inner {position:relative; Top:-50% ; width:600px;margin:0 Auto;text-align:left;} /*for Explorer Only * */div.greenborder {border:1px solid green; Background-color: #FFF;} p{margin:1em;} </style> </pead> <body> <p> default length Extended page </p> <p> 1. Open Illustra Tor, create a new file, draw a rectangle that is larger than the picture you want to import, and fill it with white. 2. Select the Rectangle, Menu: Effect > Distort & Transform > Zig Zag, set as. 3. Menu: Effect > Stylize > Drop Shadow, set as. 1. Open Illustrator, create a new file, draw a rectangle that is larger than the picture you want to import, and fill it with white. 2. Select the Rectangle, Menu: Effect > Distort & Transform > Zig Zag, set as. 3. Menu: Effect > Stylize > Drop Shadow, set as. </p> Design by Forestgan This demo uses Creative Commons licensing-branding and non-commercial use. </address> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
