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>