1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 .box1{ 9 width: 800px; 10 height: 500px; 11 border: 4px red solid; 12 13 /* 設置彈性容器 */ 14 display: flex; 15 /* 設置主軸居中 */ 16 justify-content: center; 17 /* 設置側軸居中 */ 18 align-items: center; 19 } 20 21 .box2{ 22 23 background-color: #bfa; 24 } 25 26 </style> 27 </head> 28 <body> 29 30 <div class="box1"> 31 <div class="box2">aaaaaaaaa</div> 32 </div> 33 34 </body> 35 </html>
內容，只需要父元素設置
/* 設置彈性容器 */
display: flex;
/* 設置主軸居中 */
justify-content: center;
/* 設置側軸居中 */
align-items: center;