代码作者:同事宁儿;
浏览吸收者:本人天少侠
代码如下:


/*兼容ie7-ie9、火狐、谷歌浏览器,div+css全屏自适应[整体垂直居中]*/ /*author:sn,time:2012-12-7*//*visitor:htt time:2012.12.7*//*html样例*/<!DOCTYPE html PUBLIC "-//W3C//Ddiv XHTML 1.0 divansitional//EN" "http://www.w3.org/div/xhtml1/Ddiv/xhtml1-divansitional.ddiv"> <!-- saved from url=(0080)http://emap.shasm.gov.cn/TianDiTuSX/ResourceCenter/ServiceDetailInfo.aspx?ID=770 --> <html xmlns="http://www.w3.org/1999/xhtml"> <head><link rel="stylesheet" href="divPosition.css" type="text/css" /> </head> <body><div class="verticalAlign"></div><!--定位元素,页面不显示,只为页面容器整体垂直对齐作参照--><div class="divAll"><!--父级垂直居中--> <!--子级上中下排列--><div id='divTop' class="divTop"></div><div id='divBody' class="divBody"></div><div id='divBottom' class="divBottom"></div></div> </body> </html>/*css样例(divPosition.css)*/ html,body{height: 100%;/*设置html和body的width和height为100%,可使全屏生效*/width: 100%;font-size: 16px;font-family: 微软雅黑, 宋体, 黑体;color: #535353;margin: 0px; /*设置上下左右的相对位置为0,可避免超出范围出现滚动条*/ }body {white-space: nowrap;/*设置white-space:nowrap,同时在相对参照元素中线居中时设定display:inline-block,可避免浏览器缩放时,垂直居中的容器换行*/text-align: center;/*设置text-align: center,可使子容器水平对齐*/ }div {display: inline-block;/*div内联不换行,ie8和ie9不识别带*的样式,只执行第一个display,ie6和ie7识别带*的样式,执行第二个display和zoom*/*display:inline;/*ie6和ie7兼容display: inline-block,以【*display:inline;*zoom:1;】代替*/*zoom:1; }.verticalAlign {vertical-align: middle;/*设置vertical-align: middle,可使此和同一级别元素中线对齐*/height: 100%;width: 0px; /*设置width:0px,可使此元素不显示,只为页面容器整体垂直对齐作参照*/border: none;padding: 0px;margin: 0px 0px 0px -5px;/*设置mrgin-right:-5px,避免容器横向超出*/ }.divAll {width: 100%;height: auto;vertical-align: middle;/*设置vertical-align: middle,相对同一级别元素中线对齐*/margin: 0px;border: none;padding: 0px; }/*以上为父级垂直居中,以下为子级上中下排列*/.divBody {width: 100%;min-width: 900px;vertical-align: middle;/*设置vertical-align: middle,相对同一级别元素中线对齐*/margin: 0px;border: none;padding: 0px; }.divTop {background-image: url(../images/serviceDetail_logo.png);background-repeat: no-repeat;height: 61px;width: 80%;min-width: 900px;margin-left: auto;/*设置高度,并设置margin的left和right为auto,在非absolute情况下可水平居中*/margin-right: auto;border-bottom: 5px solid #ff8a00;vertical-align: top;/*设置vertical-align: top,相对同一级别元顶端对齐*/display: block;/*div内联换行*/ }.divBottom {width: 100%;min-width: 900px;height: 100px;margin: 0px;vertical-align: bottom;/*设置vertical-align: bottom,相对同一级别元素底端对齐*/display: block; }