div实现水平垂直居中
对div实现水平垂直都居中,可以利用position:absolute和margin负边距,代码如下:
步骤:
1.先对div绝对定位到body的左上角。
2.设置left:50%,top:50%,把div起点位置(左上角点)定位到body正中间。
3.设置margin-left位负的div宽度的一半,margin-top为负的div高度的一半。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .main{ 8 background-color: #cccccc; 9 position: absolute; 10 width:400px; 11 height:200px; 12 left:50%; 13 top:50%; 14 margin-top: -100px; 15 margin-left:-200px; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="main"></div> 21 </body> 22 </html>