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;
} */