css在父盒子中不上下居中实现，放大缩小动画

遇到的一个小问题，不算很难，记录一下：

想要实现的效果：

我纠结的问题在于，我一般某个元素单独的上下居中，会使用这种方式：

父元素： {
  position: resolve;
}
子盒子： {
  postion: absolute;
  top: 50%;
  transform: translateY(-50%);
}

如果要实现放大缩小的动画，最简单的是使用动画：

@keyframes abc {
    from {
        transform: scale(0.8);
    }
    to {
        transform: scale(1.2);
    }
}

问题在于，这样就没有办法实现即不居中，有可以实现放大缩小的动画，我尝试过将动画属性设置为下面 这样：

@keyframes abc {
    from {
        transform: translate(-50%) scale(0.8);
    }
    to {
        transform: translate(-50%) scale(1.2);
    }
}

这样是无法实现动画效果的，如果想要知道什么效果，可以自己尝试一下。

下面是我实现的方式

使用一个盒子来包着需要实现放大缩小的盒子&#x