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

时间:2024-03-08 19:46:14

问题:用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进行位置的微调