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

作者: adm 分类: 教程发布时间: 2021-07-08

方法一：

   <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;
}

css

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