Сделайте прямоугольник в середине

Question

Как сделать div с разными размерами по вертикали в середине страницы.

Например, высота 100px.

как окна 8 сообщений.

Thnk вы. Mohammad.

Answer 1

Используйте margin:auto в сочетании с position: absolute. Затем объявите все левые/верхние/правые/нижние как ноль. Он работает только в том случае, если вы добавили height в свой css. Он не работает для переменных высот.

Смотрите эту скрипку http://jsfiddle.net/mBBJM/1/

Answer 2

Если вам не нужно поддерживать ветхих браузеры, это, вероятно, самый простой способ. Размеры элемента не имеет значения:

.vert_element { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
} 

DEMO

Answer 3

Если я правильно понял вопрос, это как один из вариантов DEMO

<div class="wrap"> 
    <div class="block">text</div> 
    <div class="block">text</div> 
    <div class="block">text</div> 
    <div class="block">text</div> 
    <div class="block">text</div> 
    <div class="block">text</div> 
    <div class="block">text</div> 
    <div class="block">text</div> 
</div> 

.wrap { 
    width: 800px; 
    margin: 0 auto; 
    background: #ccc; 
    display:block; 
    overflow: hidden; 
    padding: 100px 0 0 0; 
} 
.block { 
    width: 100px; 
    height: 50px; 
    background: green; 
    margin: 10px auto; 
    display:block; 

} 
.block:nth-of-type(2) { 
    height: 80px; 
} 
.block:nth-of-type(4) { 
    height: 150px; 
} 
.block:nth-of-type(7) { 
    height: 20px; 
}