css实现一个垂直水平居中弹窗的三种方式

hjfbluesky 2019-07-01

方法一:
<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;
}

相关推荐

覆雪蓝枫 / 0评论 2019-06-27