центр вертикальный, не зная высоты контейнера

Question

Возможно ли центрировать вертикально, не зная высоты контейнера?

Я попытался отобразить: встроенный блок и вертикальный выровнять: средний, и он не работает. Что я делаю не так?

Здесь проверить: 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; 
} 

Answer 1

Вы используете position: absolute; так используя vertical-align, бесполезна, сделайте это как этот

Demo

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

Также вы необходимо удалить top: 0; из

.red2{ 
    right:0px; 
} 

Объяснение: Что мы делаем здесь, используя top: 50%;, чтобы нанести элемент на 50%; но это не совсем по центру, поэтому мы вычитаем -10px; с использованием margin-top, которое 1/2 от общей высоты элемента, который вы хотите отцентрировать вертикально

Answer 2

Предполагая, что вы хотите вертикально центрировать красные коробки, да, это возможно. Но вам нужно знать высоту этих ящиков (что вы делаете). Просто используйте следующие свойства:

top: 50%; 
margin-top: -10px; // half the height of the element 

демо: http://jsfiddle.net/dSq2n/2/

Answer 3

Используется для этого Css

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

Удалитьdisplay inline-block

Demo

Answer 4

Вы не можете использовать position:absolute, а затем сказать vertical-align:middle

Answer 5

здесь является решение попробовать это проверить эту скрипку http://jsfiddle.net/sarfarazdesigner/dSq2n/6/

.red1, .red2{ 
    position:absolute; 
    width:20px; height:20px; 
    display:block; /* how you want to display */ 
    top:50%; /* give position from top */ 
    margin-top:-10px; /* put minus margin from top formula is total height/2 */ 
    background:red; 
} 

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