你的位置:首页 > 网页设计

[网页设计]弹窗居中实现方式


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

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

实现的原理:

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

2,外围盒子定义fixed属性

3,定义内容盒子。

 

定义外围盒子:

1 outbox{2   position:fixed;3   top:0;4   right:0;5   bottom:0;6   left:0;7   display:block;8   text-align:center;9 }

定义外围盒子伪类:

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

定义内容盒子:

1 contentbox{2   display:inline-block;3   vertical-align:middle;4   text-align:center;5 }

 全部代码:

 1 <!doctype html> 2 <html> 3   <head> 4     <meta charset="utf-8"> 5     <meta name="viewport" content="width=device-width,initial-scale=1"> 6     <title>弹窗居中</title> 7     <style type="text/css"> 8       .outbox:before{ 9         content:"";10         width:0;11         height:100%;12         display:inline-block;13         vertical-align:middle;14       }15       .outbox{16         position:fixed;17         top:0;18         right:0;19         bottom:0;20         left:0;21         text-align:center;22       }23       .content{24         width:200px;25         height:200px;26         background-color:#ccc;27         display:inline-block;28         vertical-align:middle;29       }30     </style>31   </head>32   <body>33   34   <div class="outbox">35     <div class="content">36       37     </div>38   </div>39   <body>40 </html>