Разверните дочерний div в контейнере, сохраняя центр таким же - CSS

Question

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

HTML

<div class="container"> 
     <div class="rect"></div> 
    </div> 

CSS

.container { 
     width: 400px; 
     border: 1px solid #CECECE; 
     margin: auto; 
     height: 400px; 
     position: relative; 
    } 
    .rect { 
     border: 1px solid red; 
     width: 100px; 
     height: 100px; 
     margin: auto; 
     left: 150px; 
     top: 150px; 
     position: absolute; 
     transition: width 2s, height 2s, border 2s; 
    } 
    .rect:hover { 
     border: 1px solid green; 
     width: 200px; 
     height: 200px; 
    } 

Fiddle - https://jsfiddle.net/zdvcm1mp/

Answer 1

Использование CSS3 transform собственности и scale элемент по наведению вместо изменения width и height.

.container { 
 
    width: 400px; 
 
    border: 1px solid #CECECE; 
 
    margin: auto; 
 
    height: 400px; 
 
    position: relative; 
 
} 
 
.rect { 
 
    border: 1px solid red; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: auto; 
 
    left: 150px; 
 
    top: 150px; 
 
    position: absolute; 
 
    transition: transform 2s, border 2s; 
 
    transform-origin: center; 
 
} 
 
.rect:hover { 
 
    border-color: green; 
 
    transform: scale(2); 
 
}

<div class="container"> 
 
    <div class="rect"></div> 
 
</div> \t

Answer 2

Это должно помочь .. Вам нужно изменить top и left также

https://jsfiddle.net/pranesh_ravi/zdvcm1mp/1/