センターを同じに保つコンテナ内でchild divを展開する - CSS

Question

以下は、私ができない唯一のことですが、私のHTML/CSSコードは、child 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; 
    } 

フィドル - https://jsfiddle.net/zdvcm1mp/

Answer 1

使用CSS3 transform財産とscaleホバー上の要素の代わりに、widthとを変更210。

.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

これは..あなたは、私が `scale`を使用しても2倍に境界線の幅を増加させることに気づいtopとleftも

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