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>
