详解transform:translate(-50%,-50%)

            这个其实就是一个位移的属性，translateX在x轴方向上进行移动，反之translateY则是在y轴方向，而translate括号里的两个参数是先x后y的。

这句话的应用场景是实现块居中，具体实现如下：

 解释一下代码的作用：

               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布局，而不需要只在代码中写，然后刷新页面这样麻烦了。

只对新手说的，懂的人可能会觉得简单