1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <style>
8 *{
9 padding: 0;
10 margin: 0;
11 }
12 /* 第一种 */
13 /* .po{
14 position: absolute;
15 top: 50%;
16 left: 50%;
17 width: 200px;
18 height: 200px;
19 margin-top: -100px;
20 margin-left: -100px;
21 background-color: red;
22 } */
23 /* 第二种 */
24 /* .po{
25 position: absolute;
26 top: 0;
27 left: 0;
28 right: 0;
29 bottom: 0;
30 width: 200px;
31 height: 200px;
32 margin:auto;
33 background-color: red;
34 } */
35 /* 第三种 */
36 /* .po{
37 position: absolute;
38 width: 100px;
39 height: 100px;
40 top: calc(50% - 50px);
41 left: calc(50% - 50px);
42 } */
43 /* 第四种 */
44 /* .po{
45 position: absolute;
46 width: 100px;
47 height: 100px;
48 top: 50%;
49 left: 50%;
50 transform: translate(-50%,-50%);
51 } */
52 /* 第五种 */
53 /* .f{
54 display: flex;
55 justify-content: center;
56 align-items: center;
57 width: 300px;
58 height: 300px;
59 position:absolute;
60 background-color: aqua;
61 top: calc(50% - 150px);
62 left: calc(50% - 150px);
63 }
64 .po{
65 width: 100px;
66 height: 100px;
67 background-color: red;
68 } */
69
70 /* 总结:前三种需要知道子元素的宽高 后面2种不用知道子元素的宽高 */
71 </style>
72 </head>
73 <body>
74 <div class="f">
75 <div class="po">123</div>
76 </div>
77 </body>
78 </html>
