对（利用'绝对定位/负边距' 对盒子进行居中）经典方法的原理解析

摘要: CSS 绝对定位 负边距

相信大家对使用绝对定位+负外边距的的方法使盒子居中这一方法并不陌生，下面笔者解析下其原理吧~

首先我们看看这个经典居中定位的代码：

.box{
height:100px;
width:100px;
position:absolute;
top:50%;
left:50%;
margin-left:-50px;  /*宽度的一半*/
margin-top:-50px;   /*高度的一半*/
}

该方法使用的一个前提条件是必须要知道盒子的尺寸

在看下面的原理图前，我们首先要明白让盒子居中实际上为让其几何中心与父盒子的几何中心重合。



我们使用position:absolute top:50% left50%的目的在于使子盒子的左顶点与父盒子的几何中心重合，这是第一步；使用margin-top:-50px margin-left:-50px目的在于使子盒子中心与父盒子中心重合，这是第二步。

由此我们可以知道当知道任意子盒子尺寸时，都可以使用此方法让其偏移到父盒子中心