h5-任意元素居中

 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>