代碼作者：同事寧兒；
瀏覽吸收者：本人天少俠
代碼如下：
div+css全屏自適應[整體垂直居中]
/*兼容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; }