Html CSS垂直对齐无法正常工作

这里有一个JSFIDLE链接供参考：

首先，只有最上面的div。当用户单击编辑按钮时，我有一些javascript来用最下面的div替换最上面的div。问题是，当替换发生时，会有轻微的抽搐：所有的东西都会跳几个像素

我认为解决这个问题的最好方法是使顶部div垂直对齐。我为顶部div设置了一个高度，该高度与替换顶部div时底部div的高度相匹配。因此，如果两者都是垂直对齐的，那么就没有跳跃

问题是，垂直对齐在顶部div上不起作用

---

你知道我能做什么吗？

我相信你想要垂直对齐的元素必须有“内联”或“表格单元格”显示

资料来源：

---

这里有一个it工作的例子：

hm。。。演示程序功能不全：因此，我们无法确认该问题。单击“编辑”时，示例不会执行任何操作