使用 css 实现水平竖直居中的解决方案有很多，包括已知外层容器的宽度和高度的解决方案，和未知容器的宽高时的解决方案。
先来看看这段 css 代码：
.box ｛
position:absolute;
top: 50%;
left: 50%;
｝
它看起来似乎可以使元素居中，但是了解 css 的人都知道，如果仅仅使用绝对定位以及距离左侧和顶部50%的距离来实现居中，会存在一定的位置偏移（元素并不在中心位置）
所以，还需要借助 transform 和 translate 来实现。
transform 和 translate
transform:translate(-50%,-50%)
这样的属性配置想必大家并不陌生，它是实现元素水平竖直居中的解决方案之一，在不知道自身宽高的情况下，可以利用它来进行水平垂直居中。
- transform 在 css 中表示改变。
- translate() 函数是CSS3的新特性，表示移动。使用时，函数的参数传进X,Y的值，表示偏移的位置。
translate 是 transform() 的一个方法，元素从当前位置移动，根据给定的x 轴和y轴的位置参数移动
其他属性：
除了 translate 之外，还有其他的参数可以选择：
-
旋转：rotate() —— 顺时针旋转给定的角度，允许负值
-
扭曲：skew() —— 元素反转给定的角度，根据给定的水- 平线X轴和垂直线Y轴
-
缩放：scale()—— 放大或缩小，根据给定的宽度X轴和高度Y轴参数
-
旋转、缩放、平移以及倾斜元素：matrix()
方法：matrix(scale.x,scale.y,translate.x,translate.y)
并且注意要区分开 transform 和 transition，他们代表的是不同的含义。
transition 可以使 CSS 属性值在一定的时间区间内平滑的过渡（需要通过事件触发，比如：点击事件、获取焦点、失去焦点）
