嵌套中个的子盒子使用了绝对定位,父盒子使用了相对定位。那么子盒子如何居中显示:
1、距离左偏离50%
2、margin-right子盒子宽度的一半
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .box1 { height: 200px; background-color: aliceblue; position: relative; } .box2 { 900px; height: 40px; background-color: red; position: absolute; bottom:0px; left: 50%; margin-left: -450px; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
效果: