1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6
7 <style type="text/css">
8
9 *{
10 margin: 0;
11 padding: 0;
12 }
13
14 .box{
15 width: 400px;
16 height: 400px;
17 background: skyblue;
18 }
19 .cont{
20 width: 200px;
21 height: 200px;
22 background: pink;
23 }
24
25
26 /*方法一：IE8+*/
27 .box{
28 display: table-cell;
29 text-align: center;
30 vertical-align: middle;
31 }
32 .cont{
33 display: inline-block;
34 vertical-align: middle;
35 }
36
37 /*方法二：IE8+*/
38 /* .box{
39 position: relative;
40 }
41 .cont{
42 position: absolute;
43 top: 0;
44 left: 0;
45 bottom: 0;
46 right: 0;
47 margin: auto;
48 } */
49
50 /*方法三----margin---------IE6+(兼容性最好)*/
51 /* .box{
52 position: relative;
53 }
54 .cont{
55 position: absolute;
56 left: 50%;
57 top: 50%;
58 margin-left: -100px;
59 margin-top: -100px;
60 } */
61
62 /*方法四--transform------------IE9+*/
63 /* .box{
64 position:relative;
65 }
66 .cont{
67 position:absolute;
68 left:50%;
69 top:50%;
70 transform:translate(-50%,-50%);
71 } */
72
73 /*方法五--flex盒子定位--------------IE不支持*/
74 /* .box{
75 display: flex;
76 justify-content: center;
77 align-items: center;
78 } */
79 </style>
80
81 </head>
82 <body>
83
84 <div class="box">
85 <div class="cont"></div>
86 </div>
87
88 </body>
89 </html>
