Html 在保持中心不变的容器中展开子div-CSS

下面是我的HTML/CSS代码，它工作得很好。我唯一无法做到的是，在增加容器中子div的大小的同时，保持子div的中心不变。让我知道我怎样才能达到这个效果

HTML

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

---

小提琴-

在悬停状态下使用CSS3

变换

属性和

缩放

元素，而不是更改

宽度

和

高度

.container{
宽度：400px；
边框：1px实心#CECECE；
保证金：自动；
高度：400px；
位置：相对位置；
}
.直肠{
边框：1px纯红；
宽度：100px；
高度：100px；
保证金：自动；
左：150px；
顶部：150px；
位置：绝对位置；
过渡：变换2s，边界2s；
变换原点：中心；
}
.rect:悬停{
边框颜色：绿色；
变换：尺度（2）；
}

---

这应该会有帮助。。您还需要更改

顶部

和

左侧

---

我注意到，使用

缩放

也会将边框宽度增加到原来的2倍，我如何使其保持相同的边框width@Nesh在这种情况下，您可以按照Pranesh的建议更改

顶部

和

左侧

位置，因为

比例

将更改元素的所有特征。

    .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;
    }