小知识

div 整体屏幕居中 （垂直水平都居中）不需要 计算长度{同样在div 内嵌中居中居中 也一样  改成 absolute 或者 relative 外面嵌套个 div 即可 }

#a{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
}

方法二

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #a{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            position: fixed;

        }
    </style>
    <script>
        window.onload=function(){
            var a = document.getElementById("a");
            var Height=document.documentElement.clientHeight;//取得浏览器页面可视区域的宽度
            var Width=document.documentElement.clientWidth;//取得浏览器页面可视区域的宽度
            var gao1 = a.offsetHeight;
            var gao2 = a.offsetWidth;
            var Sgao1= (Height - gao1)/2+"px";
            var Sgao2= (Width - gao2)/2+"px";
            a.style.top=Sgao1;
            a.style.left=Sgao2;
        }
    </script>
</head>
<body>

    <div id="a">
        sdvcdvf
    </div>
</body>
</html>

全部代码 Code

　　

posted @ 2017-02-28 09:09  get("新技能")  阅读(194)  评论(0)    收藏  举报