使文档框水平垂直居中

<!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>
posted @ 2016-09-23 14:54 sunbey80 阅读(333) 评论(0) 收藏举报
刷新页面返回顶部