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

我试图增加div的宽度和高度,以便在一定的时间内内圈应该通过增加它的大小来填充外圈.我能够做所有事情,但只是位置导致一些问题.随着内圈的尺寸增加,其失去其中心位置并向右下方增加.如何保持增加其宽度和高度,但保持在中心,以便在完成时完全填满外圈.非常感谢

var outer, inner, width, interval, height;
inner = document.querySelector(".inner");
width = 0;
height = 0;

window.addEventListener("load", function () {
    interval = setInterval(function () {
        if (width >= 200 && height >= 200) {
            inner.textCOntent= "100% Completed";
            clearInterval(interval);
        }
        else {

            width += 3.333;
            height += 3.333;
            inner.style.width = width + "px";
            inner.style.height = height + "px";
        }
    }, 1000);
});

.outer {
  width: 200px;
  height: 200px;
  border: 5px solid tomato;
  border-radius: 50%;
  margin: 100px auto;
  position: relative;
}

.inner {
  width: 0;
  height: 0;
  background-color: tomato;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
}

var outer, inner, width, interval, height;
inner = document.querySelector(".inner");
width = 0;
height = 0;

window.addEventListener("load", function(){
 
  interval = setInterval(function(){
  
if ( width >= 200 && height >= 200 ) {
  inner.textCOntent= "100% Completed";
  clearInterval(interval);
}

else {

    width += 3.333;
    height += 3.333;
    inner.style.width = width + "px";
    inner.style.height = height + "px";

}
    
    },500);
  
});

.outer {
  width: 200px;
  height: 200px;
  border: 5px solid tomato;
  border-radius: 50%;
  margin: 100px auto;
  position: relative;
}

.inner {
  width: 0;
  height: 0;
  background-color: tomato;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}