translate(x，y) x,y的值都是百分比的话，这个百分比是参照什么来计算的？
教程上说“translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。” 。。要实现水平垂直居中，只用translate（50%;50%）为什么不可以呢？
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
.wrapper {
padding: 20px;
background:orange;
color:#fff;
position:absolute;
top:50%;
left:50%; /*如果把这几行删掉，为什么不可以居中了呢 */
border-radius: 5px;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
transform:translate( -50%, -50%);
}</style>
</head>
<body>
<div class="wrapper">
我不知道我的宽度和高是多少，我要实现水平垂直居中
</div>
</body>
</html>
