How to animate width and height of div position:absolute?

Question

css

There is a block, position: absolute
on hover, the width increases,
but if the block has top and left properties, then on hover it increases but also shifts to the right and down.
How to enlarge a block without shifting its center?
Also, what is the right way to specify in css the transition-property width and height so that they increase synchronously,
as with transition-property: all ?

Answer 1

transform: scale(N);
UPD works best for this task :
Change Center can be controlled using transform-origin

Answer 2

Here are the styles for an example, make the necessary changes and use it.

div{top:100px; left:100px; position:absolute; width:100px; height:100px; background:green; transition:0.5s ease all;}
div:hover{width:200px; height:200px; top:50px; left:50px; }

Answer 3

Use transform-origin
You can read it here