css - 过渡运行时居中的 div 看起来不稳定

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 中(至少)在过渡运行时文本看起来不连贯。我猜这是因为过渡是 1 x 1px，因此“中心样式”必须前后移动 1px。

有什么办法可以解决这个问题，让它看起来更平滑，比如子像素？谢谢。

Answer 1

试试这个让文本绝对居中..

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

当然还要降低你的转换速度。