jqueryjquerycsspositioning

Поместите элемент в центр экрана после прокрутки

просмотры: 15.8K

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

Я применяю следующий стиль при нажатии кнопки, однако, если я прокручиваю полностью вниз, элемент отображается в самом верху страницы, поскольку он считает 50% от верха всей страницы.

.Centered {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 45%;
}

Как мне разместить элемент в середине страницы на основе зелья прокрутки во время нажатия кнопки?

Спасибо.

Источник

Ответов (3)

Решение

Вы уверены, что не хотите фиксированного позиционирования?

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

.Centered
{
  width:100%;
  position:fixed;
  top:50%;
  left:45%;
}

Меню на этой странице - хороший пример фиксированного позиционирования.

Источник

Попробуйте использовать плагин jQuery Center .

Источник
.Centered 
{
    position:absolute;   
    width:100%;
    top:50%;
    left:50%;
    margin-height: -200px;
    max-height: 400px;
}

Таким образом, фокус сводится к поиску подходящего значения для max-height.

Источник