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

0

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

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

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

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

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

  • 5
    Пожалуйста, предоставьте jsfiddle или демонстрационную ссылку, чтобы получить полезные ответы
  • 0
    К элементу, который вы пытаетесь отцентрировать, добавьте margin или padding (я не уверен, какой именно) равным высоте нижнего элемента. и просто центрировать его на экране.
Показать ещё 1 комментарий
Теги:

3 ответа

0
Лучший ответ

Вы можете использовать transform: translate to vertical-center elements.

Во-первых, установите элемент в 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 -property с префиксами обычного поставщика браузера.

Повеселись!

Поделиться
  • 0
    Это все хорошо - спасибо за ответ - но это пока не решает проблему вертикального центрирования его между вершиной родительского элемента и абсолютно позиционированным нижним div (переменной высоты) :(
  • 0
    Спасибо, хотя - как только я понял, как завершить мой контейнерный div в соответствующем месте, это гораздо лучший способ сделать это, чем использовать ячейки таблицы
0

Используйте calc();

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

если высота абсолютного div равна 200px

Поделиться
  • 0
    Это отлично работает и, вероятно, является лучшим решением для использования отступов. Что бы я сделал, если бы этот абсолютный div мог иметь высоту 160px или 320px? Если вы посмотрите на ссылку на веб-сайт и уменьшите экран влево, значки изображений разделятся на две строки.
  • 0
    Медиа-запрос на помощь :)
0

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

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;
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню