CSS вертикальное выравнивание внутри контейнера минимальной высоты?

Question

Я много занимался поиском и не могу найти решение css для вертикального выравнивания моего контента.

Все решения, которые я вижу здесь, в SO и в главных статьях в Google, требуют, чтобы яиметь контейнер фиксированной высоты, содержание которого не может превышать.Я не могу гарантировать, что, поскольку контент генерируется динамически.

Единственный запасной вариант, который я могу сделать, - это некоторый JavaScript, который программно измеряет внутренний контейнер и устанавливает его margin-top.Это действительно неприлично, но единственный способ, который работает.: (

См. this js fiddle для примера разметки, которую я хочу стилизовать.

Я рад забыть IE6 для этого, но мне нужна поддержка IE7 + ипоследняя версия webkit + firefox ...

Кто-нибудь знает только CSS-решение для этого?

Answer 1

Насколько я знаю, абсолютно невозможно сделать это в IE7 только с помощью CSS, если только вы не можете жить с таблицей.Для всех приличных браузеров и IE8 вы можете использовать display: table-cell:

http://jsfiddle.net/hGjfY/

и

• вместо этого установить высоту 200pxминимальной высоты (минимальная высота не поддерживается в ячейках таблицы, высота интерпретируется как минимальная высота)

• добавить условный комментарий к цели только для IE7 и добавить минимальную высоту: 200 пикселей;и высота: авто;к внутреннему div (высота не работает должным образом в IE7 для ячеек таблицы)

• загрузить исправление jQuery только для IE7 или использовать нецентрированное представление в IE7

Answer 2

Ответ @ptriek хорош, но если вы также хотите получить горизонтальное выравнивание по центру , вам нужно иметь дополнительную обертку и установить ее как

.outer{ 
    display: table; 
    width: 100%
}
.inner{
    diplay: table-cell;
    vertical-align: middle;
    height: 200px;
    text-align:center;
}

Answer 3

Вот только CSS-подход, использующий HTML, предоставленный вами в jsfiddle.Требуется две DIVS-оболочки для вашего контента, но у вас уже есть это в вашем HTML.Это решение не использует таблицы или ячейки таблицы, но DIVS, которые работают как таблицы и ячейки таблицы с использованием CSS.

Вот ваш jsfiddle, измененный и работающий: http://jsfiddle.net/8Mjc3/2/

HTML

<div class="vertical-center-container">
  <div class="vertical-center-table-cell">
    <!-- INSERT CONTENT TO BE VERTICALLY ALIGNED -->
  </div>
</div>

CSS

.vertical-center-container {
    display: table;
    width:100%;
}
.vertical-center-table-cell {
    display: table-cell;
    vertical-align: middle;
}

Это модифицированное решение, использующее то, что я узнал о вертикальном выравнивании, используя метод ячейки таблицы из SmashingЖурнальная статья .