如何将绝对定位的缩放元素垂直居中？

Question

没有scale代码，效果很好，但是我需要将已缩放的元素垂直居中。 我正在寻找使用CSS或JS方法的解决方案。 另外，我不能使用transform-origin CSS属性，因为在某些我需要支持的浏览器中不支持它。

https://jsfiddle.net/o62ja9r6/17/

 .container { position: fixed; border: 2px dashed blue; width: 400px; height: 300px; } .slide { position: absolute; width: 76px; height: 169px; background-color: red; } .vertical-center { top: 50%; transform: scale(0.4) translateY(-50%); /* transform: translateY(-50%); // <--- it works */ } 

 <div class="container"> <div class="slide vertical-center"> </div> </div> 

Answer 1

订购事宜，交换translateY与scale 。

 .container { position: fixed; border: 2px dashed blue; width: 400px; height: 300px; } .slide { position: absolute; width: 76px; height: 169px; background-color: red; } .vertical-center { position: relative; top: 50%; transform: translateY(-50%) scale(0.4); } 

 <div class="container"> <div class="slide vertical-center"> </div> </div> 

快速解释

如果您有一个高度为100px的元素，并沿y轴平移了-50% ，它将向上移动其高度的50％，即50px 。 如果您是规模100px高的元素首先 ，下降到40%它的高度，那么这将是40px ，当你试图将其沿y轴，这只会将其向上平移高大20px 。

Answer 2

除了translate您还可以使用简单的CSS

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

有关工作演示， 请单击此处