我不知道这是否可行，但我认为使用CSS变换创建一个效果，其中div从中心扩展到预定的高度和宽度，而不仅仅是从左上角。
例如，如果我有(demo)
<div id="square"></div>
(为简洁起见，供应商前缀不详)
#square {
width: 10px;
height: 10px;
background: blue;
transition: width 1s,height 1s;
}
#square:hover {
width: 100px;
height: 100px;
}
在悬停时，这将会将正方形向右扩展到100像素。我想从中间扩大。
我知道我可以使用transform：scale(x)(demo)，但是这并没有真正为我提供一个非常“像素完美”的布局(因为它是以百分比为基础的)，它也不会影响周围的布局(使文档流中的其他元素调整为调整大小)。这本质上是我想做的，除了文档流程受到相应的影响。
有没有人知道一个方法来做这个没有javascript？
解决方法
关键是通过公式来转移差额。有一点点“摆动”，如果是漂浮在转换过程中令人烦恼的话。
加入选项
选项1：在其周围保留的空间扩展http://jsfiddle.net/xcWge/14/：
#square {
width: 10px;
height: 10px;
margin: 100px; /*for centering purposes*/
background: blue;
-webkit-transition: width 1s,height 1s,margin 1s;
-moz-transition: width 1s,margin 1s;
-ms-transition: width 1s,margin 1s;
transition: width 1s,margin 1s;
}
#square:hover {
width: 100px;
height: 100px;
margin: 55px; /* inital margin - ((intial margin - width (or height))/2) */
}
选项2：扩展其周围的元素http://jsfiddle.net/xcWge/18/：
#square {
width: 10px;
height: 10px;
margin: 0; /*for centering purposes*/
background: blue;
-webkit-transition: width 1s,margin 1s;
}
#square:hover {
width: 110px;
height: 110px;
margin: -50px; /* inital margin - ((intial margin - width (or height))/2) */
}
选项3：扩展元素之前的流程和移动元素后http://jsfiddle.net/xcWge/22/：
#square {
width: 10px;
height: 10px;
margin: 0;
position: relative;
top: 0;
left: 0;
background: blue;
-webkit-transition: width 1s,top 1s,left 1s,margin 1s ;
transition: width 1s,margin 1s;
}
#square:hover {
width: 110px;
height: 110px;
top: -50px; /* inital top- (intial top-height)/2) */
left: -50px; /* inital left- (intial left-width)/2) */
margin-right: -50px;
margin-bottom: -50px;
}
