javascript 水平垂直居中元素(兼容)

原理:利用document.body.scrollWidth和document.body.scrollHeight得出页面可视范围的高度和宽度,再通过计算将元素固定在页面中心.

PS:该实例需要你手动点击一下div#HV才会居中哦.

Code:

<!DOCTYPE html>  
<html>  
<head>  
    <title>center</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#049FF1;
        }
        #HV{
            background:#70E1FF;
            height:150px;
            width:550px;
            border:5px solid #CBF3FB;
        }
    </style>
    <script>
        function center(e){
            var ele=e.target;
            var s_width=document.body.scrollWidth;
            var s_height=navigator.userAgent.toString().indexOf('Chrome')==-1?document.documentElement.scrollHeight:document.body.scrollHeight;
            var e_width=ele.offsetWidth;
            var e_height=ele.offsetHeight;
            var left=(s_width-e_width)/2+'px',top=(s_height-e_height)/2+'px';

            ele.style.position='fixed';
            ele.style.left=left;
            ele.style.top=top;
        }
    </script>
</head>  
<body>  
    <div id="HV" onclick="center(event)">
    </div>
</body>  
</html>  

根据卜卜口の反映的问题,已做出非Chrome浏览器的兼容.