变换：缩放垂直对齐的元素答案

【问题标题】：Transform: scale vertically aligned element变换：缩放垂直对齐的元素
【发布时间】：2018-03-05 01:41:06
【问题描述】：

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

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

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

当我缩放子 div 元素时，它们会移出垂直对齐（@987654321@ 第二个绿色框已应用 transform: scale(1.5)）。

有没有办法解决这个问题？

【问题讨论】：

你能显示你的代码吗！？

标签： javascript jquery css css-transitions transform

【解决方案1】：

听起来您忘记了第二个transform 将完全覆盖原来的那个。第二个变换应该是both 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 可以更简单地对齐这些孩子

内联块

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

弹性盒

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

【讨论】：