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