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%.
Copy Code code 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 Code code as follows:
<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.
<! 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=; Charset=utf-8 "/> <title>vertical centering in valid css</title> <style type=" Text/css "> body {pad ding: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:relative;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; vertic Al-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> <script type= "Text/javascript" >//<! [cdata[function Togglecontent (name,n) {var i,t= ', el = document.getElementById (name); if (!el.origcont) El.origcont = el.innerhtml; for (i=0;i<n;i++) T + = El.origcont; el.innerhtml = t; }//]]> </script> </pead> <body> <div id= "outer" > <div id= "middle" > <di V id= "inner" class= "Greenborder" > <p> default length lengthened page </p> <p> 1. Open illustrator, create a new text Pieces, draw a rectangle, larger than the picture you want to import, a white fill. 2. Select the Rectangle, Menu: Effect > Distort & Transform > Zig Zag, set the following figure. 3. Menu: Effect > Stylize > Drop Shadow, set the following figure. 1. Open Illustrator, create a new file, draw a rectangle, larger than the picture you want to import, white fill. 2. Select the Rectangle, Menu: Effect > Distort & Transform > Zig Zag, set the following figure. 3. Menu: Effect > Stylize > Drop Shadow, set the following figure. </p> <address > Design by Forestgan This demo uses Creative Commons authorization-signature and non-commercial use. </address> </div> </div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
