垂直对齐属性的 CSS 过渡

Question

我如何制作一个具有垂直对齐:顶部的 div，将其位置更改为垂直对齐:中间，但在这些状态之间有平滑的动画过渡？

我无法让它工作，vertical-align 是不可转换的吗？

代码:

.outer{
  width:200px;
  height:200px;
  background:red;
  display:table;
  text-align:center;
}

.inner{
  width:100px;
  height:100px;
  vertical-align:bottom;
  display:table-cell;
  transition:all 2s;
}

.inner:hover{
  vertical-align:middle;
}

这是 fiddle :https://jsfiddle.net/7amp783t/

Answer 1

不要更改 vertical-align 属性，而是使用 transform: translateY() 上下移动。

我有一个 fiddle 并让这段代码工作:

.outer{
  width:200px;
  height:200px;
  background:red;
  display:table;
  text-align:center;
}

.inner{
  width:100px;
  height:100px;
  display:table-cell;
  vertical-align: bottom;
  transition: all 2s ease-in-out;
}

.inner:hover{
  transform: translateY(-50%);
}

translateY(-50%) 将文本“向上”(因此 -)移动其父框高度的 50%。

编辑 您不必担心设置父 div 的 position: relative。为清楚起见，我已将其删除。

我已经更新了 your JSFiddle , 还有。