盒子的居中问题

和width，height一样，盒子可以用left，top设置百分比的方式实现居中，这个百分比是针对定位的父级元素。这时居中是依据盒子的左边框和上边框，所以还要配合margin使用。比如一个div长宽各200，要实现居中：

div{

width: 200px;

height: 200px;

background-color: red;

position: absolute;

top: 50%;

left: 50%;

margin: -100px auto auto -100px;

}