<!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>
