代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { /* 父相 */ position: relative; width: 300px; height: 300px; background-color: #6cf; } /* 1. 子绝父相 2. 给子元素设置 left: 50%; top: 50% 参考父元素,向右移动向下移动父元素50%的距离 3. 再利用margin-left 和 margin-top 负自身的一半 来实现最后的居中 */ .son { /* 子绝 */ position: absolute; /* 1.往右走父元素宽度的一半 */ left: 50%; /* 2.往左走自身宽度的一半 */ margin-left: -50px; top: 50%; margin-top: -50px; width: 100px; height: 100px; background-color: #ff0; } </style> </head> <body> <div class="box"> <div class="son"></div> </div> </body> </html>
效果图:
07-23
627
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交