是否仅使用CSS将左右列垂直对齐到不同高度的动态中间列？

在下面的jsfiddle示例中，我希望左侧列（#left）和右侧列（#right）与中间列（#middle）的中间垂直对齐。中间柱（#中间）的高度可能会有所不同

这适用于移动设备，因此使用

text-overflow:ellipsis; 
white-space:nowrap; 
overflow:hidden; 

这一部分似乎在屏幕调整大小时按要求工作

这可以仅使用CSS（无javascript）实现吗

---

请参阅：

唯一的方法是使用display:table（-cell）和table layout:fixed。但是，这仅适用于左右立柱具有固定宽度的情况：

---

我正在研究一个解决方案，使用

display:table cell

垂直对齐内容：不幸的是

overflow:hidden

似乎没有效果。也许小提琴会给其他人一个主意，虽然。让它工作，但只有通过使用一个固定的高度。但这是不能接受的吗？