My Book

利用js让有绝对定位的盒子居中

初始化的时候

    var show = function(){
            dialogBg.style.display = "block";
            dialog.style.display = "block";
            dialog.style.left = (dialogBg.offsetWidth-dialog.offsetWidth)/2+"px";
            dialog.style.top = (dialogBg.offsetHeight-dialog.offsetHeight)/2+"px";
        };
        show();

监听resize事件,如果页面改变,则会动态居中

        obj.addEvent(window,"resize",function(){
            dialog.style.left = (dialogBg.offsetWidth-dialog.offsetWidth)/2+"px";
            dialog.style.top = (dialogBg.offsetHeight-dialog.offsetHeight)/2+"px";
        });

结构

<div class="dialogBg"></div>
<div class="dialog"></div>

css样式

.dialogBg {
        background: rgba(44,44,44,0.4);
        height: 100%;
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        display: none;
    }
.dialog {
        position: absolute;
        width: 320px;
        height: 200px;
        cursor: move;
        display: none;
}