css margin居中的问题

原理：父级设置相对定位，子级设置绝对定位，而且当前四个定位属性的值都设置了0。上面代码是子元素设置了100px的宽和40px的高，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个margin：auto它就可以上下左右都居中了。这种方案不要求父元素的高度，也就是即使父元素的高度变化了，仍然可以保持在父元素的垂直居中位置，水平方向上是一样的操作。设置margin为负数时，使内部子元素到方块3的位置，即中间位置。当设置left、top为50%的时候，内部子元素为方块2的位置。初始位置为方块1的位置。