7.使用相对定位进行div的上下左右居中

问题：用css分别实现某个DIV元素上下居中和左右居中。

代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         #div1{width:100px;
 8             height:100px;
 9         border:1px solid red;
10          position:absolute;
11             left:50%;
12             margin-left: -50px;
13             top:50%;
14             margin-top:-50px;//div盒子本身高度的一半     
15         }
16     </style>
17 </head>
18 <body>
19 <div id="div1">
20 </div>
21 </body>
22 </html>

要点：使用负值margin对相对定位的div进行位置的微调

posted @ 2015-05-27 16:48  小宾童鞋学吐槽  阅读(1461)  评论(0)  编辑  收藏  举报