最近做页面的时候经常会遇到弹出框居中的问题，
请教了一下身边的大牛，终于弄出来了，
实现的原理：
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>
原标题：弹窗居中实现方式
关键词：
我知道了 