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%);

特殊的分割线

当你想实现内嵌标题的分割线时，如下：

则可通过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%);

}

好了，关于transform的translate属性就为大家简单介绍这些，想要了解更多HTML5内容的小伙伴可以关注职坐标HTML5/CSS3频道！