方法一:
<div class="bg" >//遮罩层
<div class="point">
<div class="pop"></div> //内容区
</div>
</div>
.bg{
width:100%;
height:100%;
left:0;
top:0;
position:fixed;
background:rgba(0,0,0,0.3);
}
.point{
position:absolute;
left:50%;
top:50%;
}
.pop{
width:500px;
height:500px;
position:absolute;
left:-250px;
top:-250px;
border:2px solid red;
}
方法二:margin负边距法
<div class="bg">
<div class="pop"></div>
</div>
.bg{
width:100%;
height:100%;
left:0;
top:0;
position:fixed;
background:rgba(0,0,0,0.3);
}
.pop{
width:500px;
height:500px;
position:absolute;
left:50%;
top:50%;
left:-250px;
top:-250px;
border:2px solid red;
}
方法三:transform属性
<div class="bg">
<div class="pop"></div>
</div>
.bg{
width:100%;
height:100%;
left:0;
top:0;
position:fixed;
background:rgba(0,0,0,0.3);
}
.pop{
width:500px;
height:500px;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
border:2px solid red;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。