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