CSS解决未知高度垂直居中

尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）。

标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。

非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。 

 

<! 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" >

< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > divcenter </ 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: 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; 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 >
< 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 >
</ head >

< body >
< div  id ="outer" >
   < div  id ="middle" >
     < div  id ="inner"  class ="greenBorder" >
       < p >< a  href ="javascript:toggleContent('inner',1)" > 默认长度 </ a > &nbsp;&nbsp; < a  href ="javascript:toggleContent('inner',2)" > 加长页面 </ a ></ p >
       < p >  1.打开illustrator,新建一个文件，画个矩形，比你要导入的图片大一些，白色填充。  < br  />
        2.选中矩形，菜单：Effect > Distort  &amp;  Transform > Zig Zag，设置如下图。  < br  />
        3.菜单：Effect > Stylize > Drop Shadow，设置如下图。  < br  />
        1.打开illustrator,新建一个文件，画个矩形，比你要导入的图片大一些，白色填充。  < br  />
        2.选中矩形，菜单：Effect > Distort  &amp;  Transform > Zig Zag，设置如下图。  < br  />
        3.菜单：Effect > Stylize > Drop Shadow，设置如下图。 </ p >
       < address  style ="text-align:center; padding: .5em; clear: left;" >
      Design by  < a  href ="http://www.forest53.com" > Forestgan </ a >  本演示采用 < a  href ="http://www.creativecommons.cn/" > 创作共用授权 </ a > --署名和非商业用途。
       </ address >
     </ div >
   </ div >
</ div >
</ body >

</ html >