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 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 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 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>