教程上說“translate()函數(shù)可以將元素向指定的方向移動，類似于position中的relative∶钫妫或以簡單的理解為，使用translate()函數(shù)荚守，可以把元素從原來的位置移動珍德，而不影響在X练般、Y軸上的任何Web組件"
與此類似的還要translateX(value)，translateY(value)分別代表水平方向與垂直方向的移動锈候。當(dāng)value為一個定值的時候薄料，我們能理解，代表移動具體像素泵琳。那當(dāng)value為一個百分比的時候摄职，這個百分比代表什么呢。當(dāng)value為百分比時获列，會以本身的長寬做參考谷市，比如，本身的長為100px击孩，高為50px. 那填(50%,50%)就是向右移50px迫悠，向下移動25px，添加負號就是向著相反的方向移動巩梢。
利用這一特性可以實現(xiàn)一些很有用的效果创泄，例如垂直居中, 特殊的分割線等。
垂直居中
當(dāng)長寬都未知時括蝠，可以通過以下方法實現(xiàn)垂直居中：
position: absolute; /* 相對定位或絕對定位均可 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
特殊的分割線
當(dāng)你想實現(xiàn)內(nèi)嵌標(biāo)題的分割線時鞠抑，如下：
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%);
}
