原生JS实现居中

1、HTML结构代码如下：

<div id="box">        
    <img src="~/backcjian/images/login/bg.png" id="box1"/>
</div>

2、css样式代码如下：

body {
   margin: 0px;padding: 0px;
   background: #2b5b36;position:absolute;
   top:0px;bottom:0px;left:0px;right:0px;
   overflow:hidden;
}
#box ,#box1{
   position: fixed;   
   opacity:0.9;/*图片的透明度*/
   height:485px;width:900px;border-radius: 10px;
}

3、用js代码实现改变浏览器大小div保持居中的功能，代码如下：

b();//调用方法
function b() {
    //获取div的id元素
    var box = document.getElementById("box");
    //可视区域高度
    var cheight = document.documentElement.clientHeight || document.body.clientHeight;            
    //可视区域宽度
    var cwidth = document.documentElement.clientWidth || document.body.clientWidth;            
    //获取登录框宽度
    var lwidth = box.offsetWidth;
    //获取登录框高度
    var lheight = box.offsetHeight;
    //设置登录框的居中显示
    box.style.left = (cwidth - lwidth) / 2 + "px";
    box.style.top = (cheight - lheight) / 2 + "px";
   // onresize 事件会在窗口或框架被调整大小时发生。
    window.onresize = function () {        
        //CSS1Compat：标准兼容模式开启。BackCompat：标准兼容模式关闭。
        if (document.compatMode == "CSS1Compat") {
            cwidth = document.documentElement.clientWidth;//从新获取浏览器的宽度
            cheight = document.documentElement.clientHeight;//从新获取浏览器的高度
        }        
        box.style.left = (cwidth - lwidth) / 2 + "px";
        box.style.top = (cheight - lheight) / 2 + "px";
        box.style.height = cheight + "px";
    }
}

4、效果图