How to make same height and width div in css3?

Question

CSS code

div{
    width:50px;
    height:50px;
    background:red;
    border-radius:50px;
}
div:hover{
    width:100px;
    height:100px;
    transition:0.4s;
    -moz-transition:0.4s;
    -ms-transition:0.4s;
    -o-transition:0.4s;
    -webkit-transition:0.4s;
}

html Code

<div>

I like to expand with same height and width not only increase width right and bottom.

Answer 1

Instead of increasing width and height you could scale() the div using a CSS3 transformation, eg

http://codepen.io/anon/pen/oXQGyO

div {
    width:50px;
    height:50px;
    background:red;
    border-radius:50px;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
}

div:hover {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    transform: scale(2);

    -webkit-transition:0.4s;
    -moz-transition:0.4s;
    transition:0.4s;
}