最近做页面的时候经常会遇到弹出框居中的问题，
请教了一下身边的大牛，终于弄出来了，
实现的原理：
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>
时间： 2024-11-09 01:01:57