elemento de posición en el centro de la pantalla después de desplazarse

Question

Mi página es 2x la altura de la pantalla (tamaño varía en función de otro elemento en la página). Quiero mostrar un SPAN posición absoluta en el medio de la pantalla independientemente de la posición de desplazamiento.

aplico el siguiente estilo de botón de clic, sin embargo, si me desplazo hasta el fondo, el elemento aparece en la parte superior de la página ya que cuenta con el 50% de la parte superior de la página entera.

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

¿Cómo posicionar el elemento en el medio de la página en función de la poción de desplazamiento en el momento de un clic de botón?

Gracias.

Answer 1

¿Seguro que no quieres posicionamiento fijo ?

El posicionamiento absoluto posiciona un elemento dentro del contexto de una página, por lo que será desplazarse hacia arriba y hacia abajo con la página. El posicionamiento fijo posiciona un elemento en el marco de la ventana, por lo que no se mueve con la página. En su lugar, se mantiene en la misma posición, no importa la manera de desplazarse.

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

El menú en esta página es un buen ejemplo de posicionamiento fijo.

Answer 2

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

De esta manera el truco se convierte en la búsqueda de un valor adecuado para un máximo de altura.

Answer 3

Trate de usar la jQuery Plugin Centro .