css - コンテナの高さを知らずに中央垂直

Question

コンテナの高さを知らずに垂直に中央揃えすることはできますか?

display:inline-block と vertical align: middle を試しましたが、うまくいきません。私は何を間違っていますか？

ここで確認してください：http://jsfiddle.net/dSq2n/

HTML:

<div class="wrap">
    <div class="red1"></div>
    <div class="red2"></div>

    <div class="text">
        first<br>
        second<br>
        third<br>
        forth
    </div>
</div>

CSS:

.wrap{
    position:absolute;
    top:10px; left:10px;
    width:200px;
    text-align:center;
    background:grey;
}

.red1, .red2{
    position:absolute;
    width:20px; height:20px;
    display:inline-block; /* ? */
    vertical-align: middle; /* ? */
    background:red;
}

.red1{
    left:0px;
}
.red2{
    right:0px; top:0px;
}