DIV实现遮盖层和DIV垂直水平居中

DIV实现遮盖层和DIV垂直水平居中

• DIV垂直水平居中样式
• DIV遮盖层样式
• 效果图

---

1、首先准备两个DIV

<div id="waitDiv" align="center" style="background-color:white;display:none" class="waitDiv">
            <img src="${base}/sales/product/wait.gif" />
            <p>正在导入，请稍后</p>
</div>
<div id="coverDiv" style="display:block;display:none" class="coverDiv"></div>

2、设置两个DIV的CSS

<style>
    .waitDiv{
        display:block;
        width:150px;
        height:80px;
        z-index:99999;
        position:fixed;
        top:50%;
        left:50%;
        margin-left: -75px;
        margin-top: -40px;
    }

    .coverDiv{
        position:fixed;
        z-index:9999;
        top:0px;
        left:0px;
        display:none;
        width:100%;
        height:100%;
        opacity:0.5;
        background:#000;
    }
</style> 

3、用jquery控制这两个DIV的显示和隐藏

//显示
$("#waitDiv").show();
$("#coverDiv").show();
//隐藏
$("#waitDiv").hide();
$("#coverDiv").hide();

4、效果图

灰色的部分是遮盖层，白色方块是居中的DIV