Расширьте div посередине, а не только сверху и слева, используя CSS

Ключ заключается в переходе поля по формуле. Есть небольшое «покачивание», которое раздражает во время перехода, если оно плавает.

ОТРЕДАКТИРОВАНО ДОБАВЛЕНИЕ ПАРАМЕТРОВ

Вариант 1: расширяется в пределах пространства, зарезервированного вокруг него http://jsfiddle.net/xcWge/14/:

#square {
    width: 10px;
    height: 10px;
    margin: 100px; /*for centering purposes*/
    -webkit-transition: width 1s, height 1s, margin 1s;
    -moz-transition: width 1s, height 1s, margin 1s;
    -ms-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    width: 100px;
    height: 100px;
    margin: 55px; /* initial margin - (width change (and/or height change)/2), so here 100px is initial margin, and the change is (100px final W/H - 10px initial W/H = 90px change, so 100px - (90px / 2 [= 45px]) = 55px) */
}

Вариант 2: расширяет элементы вокруг него http://jsfiddle.net/xcWge/18/:

#square {
    width: 10px;
    height: 10px;
    margin: 0; /*for centering purposes*/
    -webkit-transition: width 1s, height 1s, margin 1s;
    -moz-transition: width 1s, height 1s, margin 1s;
    -ms-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    width: 110px;
    height: 110px;
    margin: -50px; /* 0 - (110px - 10px [= 100px]) / 2 =  -50px */
}

Вариант 3: расширяет элементы перед ним в потоке и сдвигает элементы после него http://jsfiddle.net/xcWge/22/:

#square {
    width: 10px;
    height: 10px;
    margin: 0;
    position: relative;
    top: 0;
    left: 0;
    -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
    -moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
    -ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s ;
    transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
#square:hover {
    width: 110px;
    height: 110px;
    top: -50px; /* initial top[0] - (new height[110px] - initial height[10px] [=100px])/2 [=50px] = -50px) */
    left: -50px; /* initial left[0] - (new width[110px] - initial width[10px] [=100px])/2 [=50px] = -50px) */
    margin-right: -50px;
    margin-bottom: -50px;
}

ДОБАВЛЕН ПРИМЕР НЕПЛОЩАДЬ

Был сделан комментарий, что это не работает для неквадрата (одинаковая ширина/высота), но это просто означает, что во время перехода нужно настраивать по-разному для каждого направления. Итак, вот Вариант 2 (не квадратный), который начинается как прямоугольник, а ширина увеличивается в два раза по сравнению с высотой (поэтому изменяет даже форму прямоугольника) во время переход: расширяется по элементам вокруг него http://jsfiddle.net/xcWge/2131/

#rectangle {
    width: 110px;
    height: 10px;
    margin: 0; /*for centering purposes*/
    -webkit-transition: width 1s, height 1s, margin 1s;
    -moz-transition: width 1s, height 1s, margin 1s;
    -ms-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#rectangle:hover {
    width: 310px;
    height: 110px;
    margin: -50px -100px; /* initial margin - ((initial margin - width change (or height change))/2) */
}

Если бы width также менялось только на 100 пикселей (то есть со 110 пикселей до 210 пикселей), то margin: -50px все еще работало бы.