使用Javascript暂时增加元素的宽度和高度，同时保持其中心位置

我试图增加一个div的宽度和高度，这样在一定的时间内，内圈应该通过增加大小来填满外圈。我什么都能做，只是这个职位有点问题。随着内圈尺寸的增加，其中心位置将丢失，并向右下方增加。我如何才能不断增加它的宽度和高度，但保持在中心，这样当它完成时，它完全填满了外圈。非常感谢

var外部、内部、宽度、间隔、高度；
内部=document.querySelector（“.inner”）；
宽度=0；
高度=0；
addEventListener（“加载”，函数（）{
间隔=设置间隔（函数（）{
如果（宽度>=200和高度>=200）{
internal.textContent=“100%完成”；
间隔时间；
}
否则{
宽度+=3.333；
高度+=3.333；
inner.style.width=宽度+px；
inner.style.height=高度+px；
}
}, 1000);
});
.outer{
宽度：200px；
高度：200px；
边框：5px实心番茄；
边界半径：50%；
保证金：100像素自动；
位置：相对位置；
}
.内部{
宽度：0；
身高：0；
背景色：番茄；
位置：绝对位置；
最高：50%；
左：50%；
边界半径：50%；
}

JS-Bin
您只需添加一个
转换：translate（-50%，-50%）到
内部
圆圈类。这可确保其正确居中


var外部、内部、宽度、间隔、高度；
内部=document.querySelector（“.inner”）；
宽度=0；
高度=0；
addEventListener（“加载”，函数（）{
间隔=设置间隔（函数（）{
如果（宽度>=200和高度>=200）{
internal.textContent=“100%完成”；
间隔时间；
}
否则{
宽度+=3.333；
高度+=3.333；
inner.style.width=宽度+px；
inner.style.height=高度+px；
}
},500);
});
.outer{
宽度：200px；
高度：200px；
边框：5px实心番茄；
边界半径：50%；
保证金：100像素自动；
位置：相对位置；
}
.内部{
宽度：0；
身高：0；
背景色：番茄；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
边界半径：50%；
}

JS-Bin
感谢您的快速响应和极好的回答，向D-Money竖起大拇指