变换:缩放垂直对齐元素

Question

我在其他div元素中垂直对齐了div元素。

我正在使用：position: relative; transform: translateY(-50%); top: 50%对齐它们。效果很好。

我现在想要缩放元素(使用jQuery插件'Transit')。

当我缩放子div元素时，它们会移出垂直对齐(https://i.imgur.com/wWTJSSj.png第二个绿色框已经应用了transform: scale(1.5) )。

有办法绕过这件事吗？

Answer 1

听起来你好像忘了第二个transform将完全覆盖原来的。第二个转换应该是和 transform: translateY(-50%) scale(1.5);

​

.container {
  height: 100vh;
  padding-top: .25em;
}

.box {
  height: 2em;
  width: 3em;
  background: limegreen;
  float: left;
  margin: .5em;
  position: relative;
  transform: translateY(-50%);
  top: 50%;
  transition: transform .3s ease;
}

.tall {
  height: 4em;
}

.box:hover {
  transform: translateY(-50%) scale(1.5);
}

<div class="container">
  <div class="box"></div>
  <div class="box tall"></div>
  <div class="box"></div>
  <div class="box"></div>

</div>

​

坦率地说，这种对齐技术是不必要的。使用display:inline-block和vertical-align:middle，或者仅仅使用flexbox和align-items:center，这些孩子可以更简单地对齐。

Inline-block

​

.container {
  height: 100vh;
  padding-top: .25em;
}

.box {
  height: 2em;
  width: 3em;
  display: inline-block;
  vertical-align: middle;
  background: limegreen;
  margin: .5em;
  transition: transform .3s ease;
}

.tall {
  height: 4em;
}

.box:hover {
  transform: scale(1.5);
}

<div class="container">
  <div class="box"></div>
  <div class="box tall"></div>
  <div class="box"></div>
  <div class="box"></div>

</div>

​

Flexbox

​

.container {
  height: 100vh;
  padding-top: .25em;
  display: flex;
  align-items: center;
}

.box {
  height: 2em;
  width: 3em;
  background: limegreen;
  margin: .5em;
  transition: transform .3s ease;
}

.tall {
  height: 4em;
}

.box:hover {
  transform: scale(1.5);
}

<div class="container">
  <div class="box"></div>
  <div class="box tall"></div>
  <div class="box"></div>
  <div class="box"></div>

</div>

​