position学习 一种让元素上下和左右居中的方式

一  position属性

1 absolute绝对定位

相对于上一级的父元素进行定位，通过“top”，‘right’，‘bottom’，‘left’进行定位；

2 fixed
固定定位

相对于浏览器边界进行定位，通过“top”，‘right’，‘bottom’，‘left’进行定位；

 3 relative   相对定位

相对于该元素本来应该在的位置进行定位，通过“top”，‘right’，‘bottom’，‘left’进行定位；但是“top：-20px”是向左移动20px；

二   一种让元素上下和左右居中的方式

<div id="zong">
</div>

#zong {
background-color: #ccc;
width: 400px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -100px;

}