<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translate</title>
<style>
.bg{
//父級盒子高度設置大點方便看出效果
height: 1000px;
}
.center{
/*background: red;*/
/*設置絕對定位，讓此元素基於瀏覽器進行變化*/
position: absolute;
/*此處有一個易犯錯的地方，此時設置的‘50%’是基於誰的。*/
/*因爲已經設置了絕對定位，該元素已經脫離了他之前的父元素，也就是說它現在的父元素是
當前的瀏覽器窗口，所以‘50%’是當前窗口大小的一半*/
left: 50%;
top: 50%;
/*使用translate將元素往後退自己大小的一半 這裏的‘50%’是該元素大小的一半*/
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform:translate(-50%,-50%);
background: red;
}
</style>
</head>
<body>
<div class="bg">
<div class="center">translate絕對居中</div>
</div>
</body>
</html>
