Вертикальное центрирование div сверху абсолютно позиционированного div

Question

Сейчас у меня есть сайт с разделом содержимого основного тела. В этой секции содержимого тела есть элемент, который абсолютно расположен к основанию, с небольшим промежутком между ним и нижним колонтитулом.

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

Если я выполняю метод вертикального выравнивания с использованием ячеек таблицы, проблема в том, что моя опция height : 100% здесь не работает, поэтому контент действительно центрирован между заголовком и нижним колонтитулом, но мне нужно, чтобы он был центрирован между заголовком и мое абсолютно расположенное нижнее содержимое над нижним колонтитулом.

Далее ваши комментарии здесь демо ссылка: http://smartlights.azurewebsites.net/

Дальнейшее расширение является то, что, так как это адаптивный дизайн сайта а нижний абсолютный ряд может на самом деле в конечном итоге, два возможных высот. Возможно ли это в CSS или javascript, безусловно, должен быть задействован?

Answer 1

Вы можете использовать transform: translate для элементов с вертикальным центром.

Сначала установите элемент position: absolute, или position: relative, и нажмите его на 50% от высоты его родителя с помощью top: 50%. Как это:

.vertical-align { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    right: 0; 
} 

Теперь верхняя часть элемента .vertical-align будет выравниваться к середине своего родителя. Все, что вам нужно сделать сейчас, это увеличить его до 50% от его собственного размера. Это можно сделать с помощью javascript, если вам так хочется, но мне очень нравится делать это с помощью transform: translateY(-50%).

.vertical-align { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    right: 0; 

    transform: translateY(-50%); 
} 

Вот перо этого в действии: http://codepen.io/anon/pen/Ckyvz

Вот поддержка браузера для 3D-преобразований: http://caniuse.com/#feat=transforms3d

Запомнить префикс transform -свойства с регулярными префиксами браузера поставщика.

Удачи!

Answer 2

Использование calc();

.center_div{ 
    height:calc(100% - 200px); 
} 

предполагая рост абсолютного DIV является 200px

Answer 3

вы можете выровнять элемент в центр с помощью этого метода.

element{ 
    position: absolute; 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
    width:100px; 
    height:100px; 
    margin:auto; 
} 

это для вертикального выравнивания центра.

element{ 
    position: absolute; 
    top:0; 
    bottom:0; 
    height:100px; 
    margin:auto 0; 
}