如何在div中以动态高度垂直居中文本

Question

我有一个动态高度的div（它的高度取决于它包含的图像）。

现在我将div分成两部分（上下50％高度）。

因此div高度将根据div宽度而变化。

我想让上下分割div在垂直方向上对齐，但display: table-cell; vertical-align: middle;方法似乎在这里不起作用。

http://jsfiddle.net/fish_ball/MhY3M/

需要你的帮助！

HTML标记：

<div id="outer">
    <img id="inner-back" src="http://www.google.cn/landing/cnexp/google-search.png" />
    <div id="inner-up">upper-text</div>
    <div id="inner-down">upper-down</div>
</div>

CSS样式表：

#outer {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
}
img#inner-back {
    width: 100%;
}
#inner-up {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background-color: blue;
    opacity: 0.5;
    color: white;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
#inner-down {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background-color: green;
    opacity: 0.5;
    color: white;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}