您所在的位置:小祥子 » 编程 » CSS » 正文

弹窗居中实现方式

时间:2015-05-26 编辑:冰DONG奶茶 来源:本站整理

最近做页面的时候经常会遇到弹出框居中的问题,

请教了一下身边的大牛,终于弄出来了,

实现的原理:

1,给外围盒子定义一个伪类:before  

2,外围盒子定义fixed属性

3,定义内容盒子。

定义外围盒子:

 outbox{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    display:block;
    text-align:center;
 }

定义外围盒子伪类:

outbox:before{
   content="";
   width:0;
   height:100%;
   display:inline-block;
   vertical-align:middle;
}

定义内容盒子:

 contentbox{
    display:inline-block;
    vertical-align:middle;
    text-align:center;
 }
关键词:居中