por qué no me funciona el 'top'? (y ya he dado mil vueltas)

[Tecna]

Buenas,

las propiedades para posicionar elementos funcionan con cualquier valor de la propiedad position pero la ubicación del elemento respecto al lienzo del documento que sería el marco de la ventana y su comportamiento (al cambiar el tamaño de la ventana, hacer scroll o en distintas resoluciones) es diferente. Por ejemplo con absolute si es el primer elemento posicionado así lo hará respecto a la esquina superior izquierda de la ventana pero si hay mas lo hará repecto al último y siempre se saca del flujo normal del documento. Con relative no se saca del flujo del documento y se calcula su posición respecto a la que debería ocupar si no se hubiera posicionado relativamente. Es bastante complejo para explicarlo en dos palabras, busca algo sobre posicionamiento.

Por otro lado centrar verticalmente es bastante más dificil que horizontamente, hay varias técnicas para ello pero siempre depende del tamaño del elemento, si el height del elemento a centrar es variable o desconocido como en tu caso no se puede hacer con css, habría que calcularlo. Si pones top 50% o el elemento a centrar tiene un height de 0% o no quedaría centrado. Y para centrarlo horizontalmente no uses la etiqueta center, se recomienda hacerlo con css margin: 0 auto