css篇之absolute絕對定位元素居中技巧

通常地，居中絕對定位元素，left:50%;top:50%;再margin負值或者經過transform也可達到效果。
今天發現另外一個技巧，利用，top,left,right,bottom取值0，再magin:auto,便可實現居中。
緣由：

For absolutely positioned elements, the top, right, bottom,and left properties specify offsets from the edge of the element's containing block (what the element is positioned relative to).The margin of the element is then positioned inside these offsets.

<div class='box>
    <div class='jz'></div>
</div>

div.box{
   position: relative;
   height: 300px;
   background: #989eaa;
}
div.fz{
   width: 100px;
   height: 100px;
   background: #499682;
   position: absolute;
   top:0;
   left: 0;
   right: 0;
   bottom: 0;
   margin:auto;
}

注：子元素大的話，上下可居中，左右失效。