css - center vertical without knowing the height of the container -

is possible center vertical without knowing height of container?

i tried display:inline-block , vertical align: middle , not work. doing wrong?

here check: 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; } 

you using position: absolute; using vertical-align of no use, this

demo

.red1, .red2{     position:absolute;     width:20px; height:20px;     background:red;     top: 50%;     margin-top: -10px; } 

also need remove top: 0; from

.red2{     right:0px; } 

explanation : doing here is, using top: 50%; bring element down 50%; not centered, subtract -10px; using margin-top 1/2 of total height of element want center vertically