css3中transform對位置的應用

以前想把一個對象定位在一個父對象的中間時（如下圖所示）

 

以前可能使用的css爲

<pre name="code" class="css">top:50%;
left:50%;
margin-left:-50px;

margin-top:-50px;/*需要計算比較麻煩*/

但是借用css3中的transform可以很方便的實現

top:50%;
left:50%;
transform:translate(-50% -50%);/*比較方便*/

可能有時需要結合translate3d使用，則直接在translate後面寫translate3d。

下例在居中的基礎上往上偏移50px

css樣式爲

top:50%;
left:50%;
transform:translate(-50% -50%) translate3d(0px,-50px,0px);/*比較方便*/