Question

没有scale代码可以正常工作，但我需要垂直居中已经缩放元素。我正在寻找使用CSS或JS方法的解决方案。另外我不能使用transform-origin CSS属性，因为在某些我需要支持的浏览器中它不受支持...

.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。

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

快速爆炸

如果你有一个100px高的元素，并且你沿着y轴将其-50%翻译，它将向上移动50％的高度，即50px 1}}。如果您将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); }

datetime

用于工作演示click here

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

2 个答案: