css居中的多种方式 

 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>

 

posted @ 2020-08-14 15:59  gsq1998  阅读(131)  评论(0)    收藏  举报