1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css" media="screen"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 html,body{ 12 width: 100%; 13 height: 100%; 14 } 15 body{ 16 display: flex;justify-content: center;align-items: center; 17 } 18 .box{ 19 width: 500px; 20 height: 500px; 21 border: 1px solid #ccc; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="box"> 27 28 </div> 29 </body> 30 </html>
自己經常喜歡寫一些測試代碼，就希望在顯示器的正中顯示該盒子，其實就是這么簡單的一段代碼，還有使用傳統的方式來實現居中的，有時間寫寫