javascript - 变换:缩放垂直对齐的元素

Question

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

我使用以下方法对齐它们:position: relative;变换:翻译Y(-50%)；顶部:50%。这很好用。

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

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

有什么办法解决这个问题吗？

Answer 1

听起来您好像忘记了第二个转换 将完全覆盖 原始转换。第二个转换应该是两者 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

行内 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>