标准浏览器如Mozilla,Opera,Safari等.，可将父级元素显示方式设定为TABLE(display:table;)，内部子元素定为table-cell(display:table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。
非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50%来抵消。
复制代码 代码如下:
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%;}/*forexploreronly*/
#middle[id]{display:table-cell;vertical-align:middle;position:static;}
#inner{position:relative;top:-50%;width:400px;margin:0auto;}/*forexploreronly*/
div.greenBorder{border:1pxsolidgreen;background-color:ivory;}
xhtml
复制代码 代码如下:
