Javascript 如何使绝对定位的缩放图元垂直居中？

没有

scale

代码可以正常工作，但我需要垂直居中一个已经缩放的元素。我正在寻找使用CSS或JS方法的解决方案。 另外，我不能使用

transformorigin

CSS属性，因为我需要支持的某些浏览器不支持它

.container{
位置：固定；
边框：2个蓝色虚线；
宽度：400px；
高度：300px；
}
.幻灯片{
位置：绝对位置；
宽度：76px；
高度：169px；
背景色：红色；
}
.垂直中心{
最高：50%；
转换：比例（0.4）translateY（-50%）；
/*转换：translateY（-50%）；//顺序事项，用
比例
交换
translateY


.container{
位置：固定；
边框：2个蓝色虚线；
宽度：400px；
高度：300px；
}
.幻灯片{
位置：绝对位置；
宽度：76px；
高度：169px；
背景色：红色；
}
.垂直中心{
位置：相对位置；
最高：50%；
转换：translateY（-50%）量表（0.4）；
}
您可以使用简单的
CSS
来代替
translate

.vertical-center {
  top: 0;
  left:0px;
  bottom:0px;
  right:0px;
  margin: auto;
  transform:  scale(0.4);
}

对于工作演示
来说，您的方法有一个问题：由于我不知道的原因，
的下半部分。幻灯片
容器未被考虑……是的！我同意当宽度和高度不固定时，这种方法将不起作用，此时您可以使用
flexbox