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>

 

posted @ 2017-10-27 17:35  yosning520  阅读(142)  评论(0)  编辑  收藏  举报