top,right,bottom,left设置为0有什么用？

left等定位属性，要使用时，它必需是已定位的元素。（absolute，relative，fixed）
　　eg：img{position:absolute;left:100px} 如果去掉position：absolute，则left失效。对float：left这种浮动元素也是失效，反正就是定位了才让用哈。

拓展一种居中用法，

（1）先定位，设置 top:0;bottom:0;margin:auto 可以使元素水平居中。

（2）设置 left：0;right：0;margin:auto 可以使元素垂直居中。

（3）设置四个值都是0，margin:auto ；这个元素就在正中间了。如果不设置元素大小，就平铺了。

 

<div class='outer'>
   <div class='inner'>88</div>
</div>

.outer{
  position: relative;
  height: 200px;
  background-color: green;
}

/*（1）水平居中，不设置宽度则会水平铺满父容器*/
.inner {
  background-color: red;
  position: absolute; 
  left: 0;
  right: 0;
  width: 80px; 
  margin: auto;
}

/*（2）垂直居中，不设置高度则会垂直铺满父容器*/
/* .inner {
  background-color: red;
  position: absolute; 
  top: 0;
  bottom: 0;
  height: 100px;
  margin: auto;
} */

/*（3）水平及垂直居中，不设置高度，宽度则会铺满父容器*/
/* .inner {
  background-color: red;
  position: absolute; 
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  height: 100px;
  margin: auto;
} */