1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 5     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 6     <title>水平居中的</title>
 7     <style>
 8     *{
 9         margin: 0;
10         padding: 0;
11     }
12    /* .box{
13         width: 200px;
14         height:200px;
15         background-color: aliceblue;
16         left: 50%;
17         top: 50%;
18         position: fixed;
19         /* 向右偏移盒子的一半 */
20         /*margin-left: -100px;*/
21         /* 向上偏移盒子的一半 */
22       /*  margin-top: -100px; 
23     }*/
24   /*  .box{
25         width: 200px;
26         height:200px;
27         background-color: aliceblue;
28         left: 50%;
29         top: 50%;
30         position: fixed;
31         transform: translate(-100px,-100px);
32     }*/
33   /*  .box{
34         width: 200px;
35         height:200px;
36         background-color: aliceblue;
37         left: 0;
38         top: 0;
39         position: fixed;
40         bottom: 0;
41         right: 0;
42         margin: auto;
43         
44     }*/
45     html,body{
46         width: 100%;height: 100%;
47     }
48     body{
49         width: 100%;
50         height: 100%;
51         justify-content:center;
52         align-items: center;
53         display: flex;   
54     }
55     .box{
56         width: 200px;
57         height:200px;
58         background-color: aliceblue;
59         
60     }
61     </style>
62 </head>
63 <body>
64     <div class="box"></div>
65 
66 </body>
67 </html>