1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title></title>
7 <style>
8 /*第一种方法*/
9 /*.parent {
10 width: 800px;
11 height: 500px;
12 border: 2px solid #000;
13 position: relative;
14 }
15
16 .child {
17 width: 200px;
18 height: 200px;
19 margin: auto;
20 position: absolute;
21 top: 0;
22 left: 0;
23 bottom: 0;
24 right: 0;
25 background-color: red;
26 }*/
27 /*第二种方法*/
28 /*.parent {
29 width:800px;
30 height:500px;
31 border:2px solid #000;
32 display:table-cell;
33 vertical-align:middle;
34 text-align: center;
35 }
36 .child {
37 width:200px;
38 height:200px;
39 display:inline-block;
40 background-color: red;
41 }*/
42 /*第三种方法*/
43
44 .parent {
45 width: 800px;
46 height: 500px;
47 border: 2px solid #000;
48 display: flex;
49 justify-content: center;
50 align-items: center;
51 }
52
53 .child {
54 width: 200px;
55 height: 200px;
56 background-color: red;
57 }
58 /*第四种方法*/
59 /*.parent {
60 width:800px;
61 height:500px;
62 border:2px solid #000;
63 position:relative;
64 }
65 .child {
66 width:300px;
67 height:200px;
68 margin:auto;
69 position:absolute;/*设定水平和垂直偏移父元素的50%，*/
70
71 再根据实际长度将子元素上左挪回一半大小*/
72 /* left:50%;
73 top:50%;
74 margin-left: -150px;
75 background-color: red;
76 }*/
77 </style>
78 </head>
79
80 <body>
81 <div class="parent">
82 <img class="child" src="img/cloud_07.png">
83
84 </img>
85
86 </div>
87 </body>
88
89 </html>
