中心格，而轉換運行看起來不穩定

Question

我有一個與文本內部跨度的div。此內部跨度應垂直和水平居中所有的時間：

http://jsfiddle.net/QW4Wk/

<div> 
    <span>Text aligned center</span> 
</div> 

的div有一個過渡當鼠標已經結束，從而改變它的寬度和高度。

div{ 
width:200px; 
height:200px; 
background:black; 
position:relative; 
-webkit-transition:width 10s,height 10s; 
} 
span { 
position:absolute; 
color:white; 
bottom:0; 
right:0; 
} 
div:hover{ 
width:250px; 
height:250px; 
} 

但是，在Chrome（至少）文本看起來波濤洶涌，而過渡運行。我想這是因爲過渡是1px，因此「中心風格」必須前後移動1px。

有沒有辦法解決這個看起來更平滑，像子像素？ 謝謝。

Answer 1

嘗試一下本作絕對居中文本..

span { 
    margin: auto; 
    color:white; 
    text-align:center; 
    height:10px; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
} 

，當然減少你的轉換速度。

Answer 2

對跨度應用不同的更改。變換可以是子像素

div{ 
    width:200px; 
    height:200px; 
    background:black; 
    position:relative; 
    -webkit-transition:width 10s,height 10s; 
} 
span { 
    position:absolute; 
    color:white; 
    top:75px; 
    left:50px; 
    width: 100px; 
    transition: -webkit-transform 10s; 
    -webkit-transform: translate(0px, 0px); 
} 
div:hover{ 
    width:250px; 
    height:250px; 
} 

div:hover span { 
    -webkit-transform: perspective(999px) translate(25px, 25px); 
} 

fiddle