1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .box{ 12 width: 400px; 13 height: 400px; 14 border-radius: 200px; 15 background-color: #65ffdd; 16 margin: 100px auto; 17 position: relative; 18 } 19 .rec{ 20 width: 100px; 21 height: 100px; 22 background-color: #7a67ff; 23 position: absolute; 24 /*定位的百分比是参照父容器的宽高*/ 25 left: 50%; 26 top: 50%; 27 /*使用transform实现元素的居中是参考元素本身的宽高*/ 28 transform: translate(-50%,-50%); 29 } 30 31 </style> 32 </head> 33 <body> 34 <div class="box"> 35 <div class="rec"></div> 36 </div> 37 </body> 38 </html>