使文档框水平垂直居中
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; } div{ position: fixed; opacity: 0.8; } .top{ left: 0; right: 0; top: 0; height: 100px; background-color: #992200; } .bottom{ left: 0; right: 0; bottom: 0; height: 40px; background-color: #cc99cc; } .left{ left: 0; top: 0; bottom: 0; width: 160px; background-color: #55bb33; } .right{ right: 0; top: 0; bottom: 0; width: 50px; background-color: #66ccee; } .container{ width: 1400px; height: 1200px; color: #fff; background-color: #333; } </style> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> </head> <body> <div class="top"></div> <div class="right"></div> <div class="bottom"></div> <div class="left"></div> <div class="container"> <section style="height:100%;"> <p>我是一个居中的文档框</p> <p>nodejs在调用某个包时,会检查包中package.json文件的main字段,将其作为包的接口模块,如果package.json或main字段不存在,会尝试寻找index.js或index.code作为包的接口。nodejs对包要求并没有那么严格,只要顶层目录下有package.json,并符合基本规范即可。模块基础上更深一步的抽象,CommonJS规范的包应该具有以下特征</p> <p>nodejs在调用某个包时,会检查包中package.json文件的main字段,将其作为包的接口模块,如果package.json或main字段不存在,会尝试寻找index.js或index.code作为包的接口。</p> </section> </div> <script> /* @param ele 居中DOM对象 @param MT 顶部边距 @param MR 右侧边距 @param MB 底部边距 @param ML 左侧边距 @param space 多填充的空间 */ function letCenter(ele,MT,MR,MB,ML,space){ if(ele.length == 0 || typeof ele !== "object"){ return false; } var XH,XW; //XH:MT,MB的最大值; XW:MR,ML的最大值 function maxNum(x,y){ return x>=y ? x:y } function minNum(x,y){ return x<y ? x:y } XH = maxNum(MT,MB); XW = maxNum(MR,ML); IH = minNum(MT,MB); IW = minNum(MR,ML); MT ? MT = MT : MT = 0; MR ? MR = MR : MR = 0; MB ? MB = MB : MB = 0; ML ? ML = ML : ML = 0; space ? space = space : space = 0; ele.style.position = "absolute"; var eleW = ele.offsetWidth; var eleH = ele.offsetHeight; var dH = document.body.offsetHeight; var dW = document.body.offsetWidth; var emT = (eleH-MT+MB)/2; var emL = (eleW-ML+MR)/2; ele.style.left = "50%"; ele.style.top = "50%"; ele.style.margin = "-" + emT + "px 0 0 -" + emL + "px"; if(eleH/2 > dH/2-XH){ //内容高度大于可视区域 ele.style.paddingTop = MT - (dH/2 - emT) + space + "px"; ele.style.paddingBottom = MB + space + "px"; } if(eleW/2 > dW/2-XW){ //内容宽度大于可视区域 ele.style.paddingLeft = ML - (dW/2 - emL) + space + "px"; ele.style.paddingRight = MR + space + "px"; } } //执行函数 var MT = $(".top").height(); var MR = $(".right").width(); var MB = $(".bottom").height(); var ML = $(".left").width(); var ele = $(".container")[0]; letCenter(ele,MT,MR,MB,ML,10); </script> </body> </html>