translate()函式是css3的新特性.在不知道自身寬高的情況下，可以利用它來進行水平垂直居中.。

當使用：top: 50%;left: 50%;， 是以左上角為原點，故不處於中心位置

 translate(-50%,-50%) 作用是，往上（x軸）,左（y軸）移動自身長寬的 50%，以使其居於中心位置。

與負margin-left和margin-top實現居中不同的是，margin-left必須知道自身的寬高，而translate可以在不知道寬高的情況下進行居中，tranlate（）函式中的百分比是相對於自身寬高的百分比，所以能進行居中。

 1 .content {
 2     padding:10px;
 3     background:green;
 4     color:#fff;
 5     position:absolute;
 6     top:50%;
 7     left:50%;
 8     border-radius: 5px;
 9     -webkit-transform: translate(-50%,-50%);
10     -moz-transform: translate(-50%,-50%);
11     transform:translate(-50%,-50%)
 
;
12 }