css实现一个垂直水平居中弹窗的三种方式
方法一：
<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;
} 相关推荐
jiedinghui 2019-12-23
hellowzm 2020-10-12
gufudhn 2020-06-12
沈宫新 2020-05-04
/*垂直居中，div上边界距离窗口上边的距离为窗口高度的50%，并针对不同浏览器进行兼容。-- 在外层添加一个div，把行内容居中，添加.row .justify-content-center -->
Phoebe的学习天地 2020-04-14
STPace 2020-02-17
xiaohuli 2020-02-12
liusure0 2020-01-11
wangjie 2020-01-12
zuncle 2019-12-30
libowen0 2014-05-30
Simagle 2015-05-27
cssuperman 2018-04-01
ThikHome 2019-07-01
Phoebe的学习天地 2019-07-01
Phoebe的学习天地 2019-07-01
王为仁 2019-07-01