css居中的多種方式
阿新 • • 發佈：2020-08-14
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>