这个其实就是一个位移的属性，translateX在x轴方向上进行移动，反之translateY则是在y轴方向，而translate括号里的两个参数是先x后y的。
这句话的应用场景是实现块居中，具体实现如下：
<style>
.outer {
width: 300px;
height: 300px;
position: relative;
background-color: rgb(75, 233, 27);
}
span {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="outer">
<span></span>
</div>
</body>解释一下代码的作用：
1.首先外层盒子.outer设置了宽和高，因为是父级所以设置了相对定位，默认位置在左上角，并设置了背景色为绿色。
2.齐次是子元素span，将其绝对定位，给定宽高，并让其位置定位在画面中心的右下角（想象屏幕中间有一个十字，这个span就紧贴着第四象限），然后利用transform属性，将其往左平移span自身长度的50%，往上平移span自身长度的50%，这样中间的盒子就居中了。这一步都可以用浏览器的调试工具来自己调，动态看效果，很容易就可以明白
注意：绝对定位后，行内元素span变成了块级元素，可以设置宽和高
效果图如下：
其中，中间红色的就是span
21年12月20日补充：
要实现这样的块居中，学了flex之后，就不要这样了，麻烦。直接父盒子---->
display:flex;
align-item:center;
justify-content:center;
就可以实现块居中了。要是不明白为什么这样会块居中，自己到浏览器开发工具中，设置了flex的元素的标签上都会显示flex的标志，点一下，在样式中看，就可以通过选择的方式来设置flex布局，而不需要只在代码中写，然后刷新页面这样麻烦了。
只对新手说的，懂的人可能会觉得简单
201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
