让定位的盒子居中对齐 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7     div {
 8         width: 200px;
 9         height: 200px;
10         background-color: pink;
11         position: absolute;
12 
13         left: 50%; /*以父级宽度为准*/
14         top: 50%;
15         transform: translate(-50%, -50%);
16     }
17     </style>
18 </head>
19 <body>
20     <div></div>
21 </body>
22 </html>
posted @ 2023-01-16 14:38  落尘001  阅读(18)  评论(0)    收藏  举报