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

Amio 发布于2019-08-29 18:36 / 923人阅读

方法一：

   //遮罩层
        
             //内容区

.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负边距法

.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属性

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

专线服务私有云服务器的三种存储方式阿里云发送邮件的三种方式云计算的三种服务模式 asp支持的三种控件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114445.html

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

方法一： //遮罩层 //内容区 .bg{ width:100%; height:100%; left:0; top:0; position:fixed; background:rgba(0,0,0,0.3); } .point{ position:absolute; left:50%; ...

tianren124 2019-08-02 16:12 评论0 收藏0
[译]148个资源让你成为CSS专家

摘要：层叠样式表二修订版这是对作出的官方说明。速查表两份表来自一份关于基础特性，一份关于布局。核心第一篇一份来自的基础参考指南简写速查表简写形式参考书使用层叠样式表基础指南，包含使用的好处介绍个方法快速写成高质量的写出高效的一些提示。迄今为止，我已经收集了100多个精通CSS的资源，它们能让你更好地掌握CSS技巧，使你的布局设计脱颖而出。 CSS3 资源 20个学习CSS3的有用资源 C...

impig33 2019-08-29 11:10 评论0 收藏0
初探flex布局

摘要：一布局概述布局是一种较新盒子模型，在布局模型中，弹性容器的子元素的排布可以比较灵活，可以根据容器的大小自动扩展或收缩其大小。下面我们来看用布局怎么解决这些问题。所以学会使用布局是非常有必要的。想详细了解布局请点击这里。一 flex布局 1.1 flex概述 flex布局是一种较新CSS盒子模型，在flex布局模型中，弹性容器的子元素的排布可以比较灵活，可以根据容器的大小自动扩展或收缩...

Jeffrrey 2019-08-29 12:48 评论0 收藏0
CSS之各种居中

摘要：前言在我看来，入门的路上最烦人的就是的各种居中了。在我初学过程中，居中这个问题经常困扰到我。使用伪元素垂直居中这种方法的前提是要是行内元素才能进行居中。结语以上的方法基本上可以用完成各种情况的居中。前言在我看来，入门CSS的路上最烦人的就是CSS的各种居中了。在我初学CSS过程中，居中这个问题经常困扰到我。那为什么CSS的居中这么烦人呢？我认为，这是因为CSS的居中方法以及它的适...

Labradors 2019-08-02 16:01 评论0 收藏0
CSS之各种居中

摘要：前言在我看来，入门的路上最烦人的就是的各种居中了。在我初学过程中，居中这个问题经常困扰到我。使用伪元素垂直居中这种方法的前提是要是行内元素才能进行居中。结语以上的方法基本上可以用完成各种情况的居中。前言在我看来，入门CSS的路上最烦人的就是CSS的各种居中了。在我初学CSS过程中，居中这个问题经常困扰到我。那为什么CSS的居中这么烦人呢？我认为，这是因为CSS的居中方法以及它的适...

Taste 2019-08-30 14:13 评论0 收藏0