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

Question

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

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

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

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

Спасибо.

Answer 1

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

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

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

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

Answer 2

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

Answer 3

.Centered 
{
    position:absolute;   
    width:100%;
    top:50%;
    left:50%;
    margin-height: -200px;
    max-height: 400px;
}

Таким образом, трюк начинает находить подходящее значение для максимальной высоты.