当前位置: 首页 > Web前端 > HTML

css中实现纵横居中弹窗的三种方式

时间:2023-04-02 22:47:03 HTML

方法一://遮罩层

//内容区
.bg{宽度:100%;高度:100%;左:0;顶部:0;位置:固定;背景:rgba(0,0,0,0.3);}.point{位置:绝对;左:50%;顶部:50%;}.pop{宽度:500px;高度:500px;位置:绝对;左:-250px;顶部:-250px;border:2pxsolidred;}方法二:margin负边距法
.bg{width:100%;高度:100%;左:0;顶部:0;位置:固定;背景:rgba(0,0,0,0.3);}.pop{宽度:500px;高度:500px;位置:绝对;左:50%;顶部:50%;左:-250px;顶部:-250px;border:2pxsolidred;}方法三:变换属性.bg{width:100%;高度:100%;左:0;顶部:0;位置:固定;背景:rgba(0,0,0,0.3);}.pop{宽度:500px;身高:500pX;位置:绝对;左:50%;顶部:50%;转换:翻译(-50%,-50%);边框:2px纯红色;}