居中对齐
运行效果:
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hover宽度增长</title> <style> *{ padding: 0; margin: 0; } #com{ width: 400px; height:400px; background:#ccc; margin: 0 auto; /*position: absolute;*/ } #dq{ width: 100px; height: 200px; background-color: #f00; position:relative; left: 50%; top: 50%; transform:translate(-50%,-50%); } p{ height:200px; background-color: blue; } </style> </head> <body> <div id="com"> <div id="dq"></div> <p></p> </div> </body> </html>