教程上说“translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件"
与此类似的还要translateX(value)，translateY(value)分别代表水平方向与垂直方向的移动。当value为一个定值的时候，我们能理解，代表移动具体像素。那当value为一个百分比的时候，这个百分比代表什么呢。当value为百分比时，会以本身的长宽做参考，比如，本身的长为100px，高为50px. 那填(50%,50%)就是向右移50px，向下移动25px，添加负号就是向着相反的方向移动。
利用这一特性可以实现一些很有用的效果，例如垂直居中, 特殊的分割线等。
垂直居中
当长宽都未知时，可以通过以下方法实现垂直居中：
position: absolute; /* 相对定位或绝对定位均可 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
特殊的分割线
当你想实现内嵌标题的分割线时，如下：
image.png
则可通过translate来完成。
具体样式如下：
.divider-horizontal {
display: block;
height: 1px;
width: 80%;
margin: 24px auto 35px auto;
background: #e9e9e9;
}
.divider-inner-text {
display: inline-block;
padding: 0 24px;
}
.divider-with-text {
display: table;
white-space: nowrap;
text-align: center;
background: transparent;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
font-size: 16px;
margin: 26px auto;
}
.divider-with-text::before, .divider-with-text::after {
content: '';
display: table-cell;
position: relative;
top: 50%;
width: 50%;
border-top: 1px dashed #e8e8e8;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
}
