展開容器中的子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; 
    } 

小提琴 - 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/