在当子元素的width和height未知时，可以通过设置translate属性来进行水平垂直居中。
在translate函数中的百分比的计算是通过该元素的content，padding，border为标准来计算的。
在使用translate或者position都会使元素产生位移，其中的区别在于 offsetLeft 和 offsetTop 属性上
offsetLeft : 258
test.html:31 offsettop : 108
offsetLeft : 208
test.html:31 offsettop : 108
使用 translate 的offsetTop和 offsetLeft 与没有产生位移的元素没有区别，这offsetTop和 offsetLeft 的值都是 固定不变 的。
offsetLeft :8
test.html:29 offsettop : 8
offsetLeft :8
test.html:29 offsettop : 8
10% { background:red} 表示背景在0－1秒内变红色；50% { width:80px} 表示宽度在0－5秒内由0变80px；
70% { border:15px solid yellow} 表示边框在0－7秒内由无边框变为15px实心的黄色边框；
100% { width:180pxheight:180px} 表示宽度从5－10秒变成180px，高度变成180px；
综上所述，前面的百分比，代表的是执行的时间，按秒来计算。
望采纳
