<!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> </head> <body> <script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script> <div class="verticalAlign"></div><!--定位元素，页面不显示，只为页面容器整体垂直对齐作参照--> <div class="divAll"><!--父级垂直居中--> <!--子级上中下排列--> <div id='divTop' class="divTop">aaaaaaaa </div> <div id='divBody' class="divBody">设置上下左右的相对位置为0，可避免超出范围出现滚动条</br>设置上下左右的相对位置为0，可避免超出范围出现滚动条</br>设置上下左右的相对位置为0，可避免超出范围出现滚动条</br>设置上下左右的相对位置为0，可避免超出范围出现滚动条</br>设置上下左右的相对位置为0，可避免超出范围出现滚动条</br>设置上下左右的相对位置为0，可避免超出范围出现滚动条</br>设置上下左右的相对位置为0，可避免超出范围出现滚动条</br> </div> <div id='divBottom' class="divBottom"> ddddd </div> </div> </body> </html> <style> /*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; /*设置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; } </style>