Zentrierung Spanne nach Transformation

Question

versuchen, eines der animierten Schaltflächen zu erstellen, die auf semantischen ui zur Verfügung speziell das animierte Warenkorb ein https://semantic-ui.com/elements/button.html

ich hier eine Geige erstellt, wo ich es CSS-Transformationen verwendet haben.

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

meine Frage ist, gibt es eine Möglichkeit, vertikal und horizontal, um die Spannweite zu positionieren, die auf schweben gleitet in ohne oben zu verwenden, CSS-Attribute übrig?

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

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

Statt um die Werte von zwicken, können Sie nutzen diese machen:

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

Die oben verwendet wird, um das Element mit der absoluten Positionierung mit Bezug zum Zentrum zu seinem übergeordneten Container. Wenn Sie also zunächst die Spanne auf einen negativen oberen Wert und auf 50% auf eine Übergangseinstellung einstellen, wird diese zentriert.

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>