以编程自身的大小和当前偏移量编程更改元素的偏移量

Question

我有一个如下所示的测试布局

<div id="parent">
    <div id="child">Hover me</div>
</div>

当元素的大小发生变化时，我需要增加或减少所有偏移量。 所以我尝试了CSS3中的Hover功能。

＆＃13;

＆＃13;

#parent {
  height: 200px;
  background: lightgray;
}
#child {
  position: relative;
  top: 50%;
  left: 50%;
  width: 100px;
  padding: 30px;
  background: red;
  text-align: center;
  transition: transform 0.5s;
  transform: translate(-50%,-50%);
  transform-origin: center top;        /* which origin to scale from */
}
#child:hover {
  transform: translate(-50%,-50%) scale(1.5);
}

＆＃13;

<div id="parent">
    <div id="child">Hover me</div>
</div>

＆＃13;

＆＃13;

＆＃13;

一切似乎都没问题，但是我需要一种使用JavaScript或jQuery实现相同功能的方法，但是基于处理动态内容，所有计算都基于确切元素而不是它的父级。