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);/*比较方便*/