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

Я не уверен, возможно ли это, но я подумал, что было бы круто использовать преобразования CSS для создания эффекта, при котором div расширяется от своего центра до заданная высота и ширина, а не только от верхнего левого угла.

Например, если у меня есть ( demo )

и (префиксы поставщиков опущены для краткости)

#square {
    width: 10px;
    height: 10px;
    background: blue;
    transition: width 1s, height 1s;
}
#square:hover {
    width: 100px;
    height: 100px;
}

При наведении курсора квадрат будет увеличиваться вправо до 100 пикселей. Я бы хотел, чтобы он расширялся от середины.

Я знаю, что, вероятно, мог бы использовать transform: scale (x) ( demo ), но на самом деле это не дает мне очень "идеального по пикселям" макета. (поскольку он основан на процентах), и он также не влияет на окружающий макет (настройте другие элементы в потоке документов в соответствии с его размером). По сути, это то, что я хочу сделать, за исключением того, что поток документов будет затронут соответствующим образом.

Кто-нибудь знает, как сделать это без javascript ?