中心スパンは後に、私はCSSの変換を使用してそれをやったところ、私はここにフィドルを作成

Question

セマンティックUIで利用できるアニメーションのいずれかのボタンを作成しようとし、具体的アニメーションショッピングカート1 https://semantic-ui.com/elements/button.html

を変換します。

https://jsfiddle.net/n37arru2/100/

私の質問は、CSS属性を左に垂直方向と水平方向のトップを使用することなく、ホバー上でスライドスパンを配置する方法はありますか？上記の関係と絶対配置を有する要素をセンタリングするために使用される

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

：

button { 
 
    position: relative; 
 
    transition: all .6s linear 
 
} 
 

 
i { 
 
    color: #FFF; 
 
    font-size: 34px !important; 
 
    /* 24px preferred icon size */ 
 
    vertical-align: middle; 
 
    transition: transform .6s linear; 
 
} 
 

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

 
button:hover > i { 
 
    transform: translate3d(0px, 45px, 0px); 
 
} 
 

 
button:hover > span { 
 
    top: 12px; 
 
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
 
     rel="stylesheet"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    
 
<button class="btn btn-primary"> 
 
    <i class="material-icons">face</i> 
 
    <span>Face</span> 
 
</button>

Answer 1

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

代わり値の周りに微調整では、これらを利用することができその親コン​​テナに転送します。したがって、スパンを最初に負のトップ値に設定し、遷移設定を50％に設定すると、それが中心になります。

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

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

button{ 
 
    position: relative; 
 
    transition: all .6s linear 
 
} 
 

 
i { 
 
    color: #FFF; 
 
    font-size: 34px !important; /* 24px preferred icon size */ 
 
    vertical-align: middle; 
 
    transition: transform .6s linear; 
 
} 
 

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

 
button:hover > i { 
 
    transform: translate3d(0px, 45px, 0px); 
 
} 
 

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

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
 
     rel="stylesheet"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    
 
<button class="btn btn-primary"> 
 
    <i class="material-icons">face</i> 
 
    <span>Face</span> 
 
</button>