margin:auto下绝对定位元素的水平垂直居中实例页面

展示

代码

CSS代码：

.dialog { width: 600px; height: 400px; margin: auto; border: 1px solid #ddd; border-radius: 15px; background-color: #fff; box-shadow: 0 3px 18px rgba(0,0,0,.5); }
.dialog_absolute { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; }

.button { display: block; margin: 170px auto; width: 160px; height: 36px; font-size: 14px; }
            

HTML代码：

<div id="dialog" class="dialog">
    <input type="button" id="button" class="button" value="点击弹框走起~~" />
</div>
            

JS代码：

var eleDialog = document.getElementById("dialog"),
    eleButton = document.getElementById("button");

eleButton.onclick = function() {
    if (eleDialog.className === "dialog") {
        eleDialog.className = "dialog dialog_absolute";
        this.value = "点击弹框降落~~";    
    } else {
        eleDialog.className = "dialog";
        this.value = "点击弹框走起~~";    
    }
};