关于css3 transform里的translate属性

教程上说“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%);
}