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>
?
2016-03-31
translate(x,y) 括號里填百分比數據的話，會以本身的長寬做參考，比如，本身的長為100px，高為50px. 那填(50%,50%)
就是向右，向下移動50px，添加負號就是向著相反的方向移動
如果設置了position:absolute;
?????????????????? top:50%
那你DIV的左邊邊框會移動到你父級（現在你的代碼，DIV的父級就是body）的中央，而不是你的DIV的中心與body
的中心重合，所以不劇中