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

作者: adm 分类: 教程 发布时间: 2021-07-08 16:49
方法一:
   <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;
}

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!