1.利用margin实现盒子居中
利用margin设置左右外边距为auto实现盒子居中显示：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 .box { 9 width: 200px; 10 height: 200px; 11 border: 1px solid #000; 12 margin: 0 auto; 13 } 14 </style> 15 </head> 16 <body> 17 <div class="box"></div> 18 </body> 19 </html>
最终实现结果如下：
2.利用position的absolute实现居中
利用position的absolute实现居中，其实也是需要margin的配合实现的。基本原理是绝对定位left: 50%，此时是盒子的左边框与父盒子的中线对齐，因此我们需要使盒子往左边走百分之五十自身一半的距离，如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 .box { 9 width: 200px; 10 height: 200px; 11 border: 1px solid #000; 12 position: absolute; 13 left: 50%; 14 margin-left: -100px; 15 } 16 </style> 17 </head> 18 <body> 19 <div class="box"></div> 20 </body> 21 </html>
最终实现结果如下：
3.利用CSS3的transform：translate 实现居中
其实本质上跟第二种方法差不多，同样是先通过绝对定位使盒子距离父盒子左边框百分之五十，此时的盒子左边框同样是与父盒子的中线对齐，然后利用transform的translateX让盒子左移动盒子宽度的一半。值得注意的是，margin的时候我们写的是盒子自身宽度一半的值，这是因为如果写百分比对比的是父盒子，而在transform中可以直接写百分比，因为translate百分比对比的是自身宽度。如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 200px; height: 200px; border: 1px solid #000; position: absolute; left: 50%; transform: translateX(-50%); } </style> </head> <body> <div class="box"></div> </body> </html>
最终实现结果如下：
