css - 内部で重なり合う 2 つの div の垂直方向の中央揃えエレメント

Question

JS Fiddleのコード サンプル

div バナーと ul の高さは固定されています。
li タグ内の要素は、垂直方向に中央揃えにする必要があります。
「disp-img-contanier」divの真上に「info-wrapper」divを配置する必要があります。しかし、私は position=absolute と top=0 を使用しているため、「情報ラッパー」div が上に移動します。

望ましい結果を達成できる方法はありますか?

HTML:

<div class="banner">
<ul class="banner-display clearfix">
    <li class="first-default">
        <div class="disp-img-contanier">
            <!--image goes here-->
            <img src="http://i303.photobucket.com/albums/nn134/gotitlikethat97/Photography/9973TressDunceCap.jpg" width="292px" height="320px" />
        </div>
        <div class="info-wrapper">
            <div class="info-base">
                 <h2>Hover Text</h2>

            </div>
        </div>
    </li>
    <li class="first-default">
        <div class="disp-img-contanier">
            <!--image goes here-->
            <img src="http://i303.photobucket.com/albums/nn134/gotitlikethat97/Photography/9973TressDunceCap.jpg" width="292px" height="320px" />
        </div>
        <div class="info-wrapper">
            <div class="info-base">
                 <h2>Hover Text</h2>

            </div>
        </div>
    </li>
    <li class="first-default">
        <div class="disp-img-contanier">
            <!--image goes here-->
            <img src="http://i303.photobucket.com/albums/nn134/gotitlikethat97/Photography/9973TressDunceCap.jpg" width="292px" height="320px" />
        </div>
        <div class="info-wrapper">
            <div class="info-base">
                 <h2>Hover Text</h2>

            </div>
        </div>
    </li>
</ul>

CSS:

    .banner {
    position: relative;
    z-index: 3;
    height: 550px;
    display: table;
    border-collapse: separate;
    border-spacing: 10px;
}

    .banner .banner-container {
    z-index: 3;
    height: 550px;
    display: table;
    border-collapse: separate;
    border-spacing: 10px;
    width:100%;
}

    .banner-display {
    width: 920px;
    margin: 0 auto;
    z-index: 0;
    height: 550px;
    position: relative;
    padding: 0;
    display: table-row;
}

    .banner-display li {
    width: 292px;
    display: table-cell;
    vertical-align: middle;
    padding-top: 5%!important;
    height: auto;
    position: relative;
    overflow: hidden;
}

    .disp-img-contanier {
    height: 320px;
    width: 292px;
    vertical-align: middle;
    overflow: hidden;
}

    .info-wrapper {
    display: block;
    width: 292px;
    height: 320px;
    position: absolute;
    top: 0;
    background: rgba(225, 225, 225, 0.8);
}