Css 变换后的定心跨度

正在尝试创建语义ui上可用的一个动画按钮，特别是动画购物车按钮

我在这里创建了一个小提琴，在这里我使用css转换

我的问题是，有没有一种方法可以垂直和水平地定位悬停时滑入的跨距，而不必使用左上角的css属性

span {
  position: absolute;
  top: -45px;
  left: 14px;
  transition: top .6s linear;
}

按钮{
位置：相对位置；
过渡：所有.6s线性
}
我{
颜色：#FFF；
字体大小：34px！重要；
/*24px首选图标大小*/
垂直对齐：中间对齐；
过渡：变换。6s线性；
}
跨度{
位置：绝对位置；
顶部：-45px；
左：14px；
过渡：顶部。6s线性；
}
按钮：悬停>i{
转换：translate3d（0px，45px，0px）；
}
按钮：悬停>跨距{
顶部：12px；
}

面对
面对

您可以使用以下选项，而不是围绕值进行调整：

top: 50%;
left: 50%;
transform:translate(-50%,-50%);

上述参数用于将具有相对于其父容器绝对定位的元素居中。因此，最初将跨度设置为负的顶部值，过渡时设置为50%，将使其居中

span {
  position: absolute;
  top: -50%;
  left: 50%;
  transform:translate(-50%,-50%);
  transition: top .6s linear;
}

button:hover > span {
    top: 50%;
}

按钮{
位置：相对位置；
过渡：所有.6s线性
}
我{
颜色：#FFF；
字体大小：34px！重要；/*24px首选图标大小*/
垂直对齐：中间对齐；
过渡：变换。6s线性；
}
跨度{
位置：绝对位置；
前-50%；
左：50%；
转换：翻译（-50%，-50%）；
过渡：顶部。6s线性；
}
按钮：悬停>i{
转换：translate3d（0px，45px，0px）；
}
按钮：悬停>跨距{
最高：50%；
}

面对
面对