Centrar verticalmente

[GUSUM]

Hola,

¿Cómo puedo colocar un elemento (tabla, imagen, video, etc.) en el centro de la ventana (teniendo en cuenta el ancho y alto, en distintas resoluciones de pantalla).

Gracias!

[Panino5001]

Sólo necesitás calcular las dimensiones de la ventana y posicionar absolutamente respecto a dichas dimensiones:

Código:

<script>
function getWindowData(){
    var widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal;
    if (typeof window.innerWidth != 'undefined'){
        widthViewport= window.innerWidth-17;
        heightViewport= window.innerHeight-17;
    }else if(typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth !='undefined' && document.documentElement.clientWidth != 0){
        widthViewport=document.documentElement.clientWidth;
        heightViewport=document.documentElement.clientHeight;
    }else{
        widthViewport= document.getElementsByTagName('body')[0].clientWidth;
        heightViewport=document.getElementsByTagName('body')[0].clientHeight;
    }
    xScroll=self.pageXOffset || (document.documentElement.scrollLeft+document.body.scrollLeft);
    yScroll=self.pageYOffset || (document.documentElement.scrollTop+document.body.scrollTop);
    widthTotal=Math.max(document.documentElement.scrollWidth,document.body.scrollWidth,widthViewport);
    heightTotal=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight,heightViewport);
    return [widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal];
}
onload=onresize=function(){
    var medidas= getWindowData();
    alert('el ancho visible de la ventana es: '+medidas[0]);
}
</script>

Viewport es la porción visible de nuestra página. Porqué decimos porción visible? Pues porque es muy probable que haya otra porción que haya quedado oculta y que sólo sea visible usando las barras de scroll. De manera que la superficie total de nuestra página será equivalente a la suma de la superficie del viewport más la superficie de la zona oculta por el scroll.
widthViewport: el ancho del viewport.
heightViewport: el alto del viewport.
xScroll: la medida del desplazamiento horizontal del scroll.
yScroll: la medida del desplazamiento vertical del scroll.
widthTotal: el ancho total de la página (porción visible más porción oculta por el scroll).
heightTotal: el alto total de la página (porción visible más porción oculta por el scroll).

[ceSharp]

Hola GUSUM,

Te cuento hasta donde yo llego...
Para centrarlo horizontalmente tendrías que poner unos <center></center> y dentro de estas etiquetas la tabla, imagen, el texto, etc.
Para el centrado vertical desde mi humilde conocimiento entiendo que el alto de una página no es finito. Entonces de entrada centrar verticalmente un objecto es complicado porque ¿donde colocarías centrado un objeto en el universo infinito?
Dentro de una altura determinada de una tabla (por ejemplo) si puedes colocar un objeto centrado verticalmente con un style="vertical-align: middle" pero mientras no definas un alto creo que no puedes centrar verticalmente un objeto.

Insisto, si estoy equivocado que alguien me tape la boca por Dios!!! :)

Salu2

[GUSUM]

Hola Panino5001,

Gracias por la respuesta y la explicación.
He intentado usar el script, pero sólo consigo que salga un mensaje con la información del ancho de mi ventana ...

[GUSUM]

Hola Cesharp,

Claro que hay manera, sólo habrá que conocerla.S i hay manera de centrara un pop up, por ejemplo, habrá maneras de centrar un elemento verticalmente

[Panino5001]

¿donde colocarías centrado un objeto en el universo infinito?

Este caso es diferente: Si quiero ver siempre algo en el centro, uso como referencia mi campo visual. En este caso la ventana por la que miramos circunscribe ese universo infinito y entonces podemos usarla de referencia. En ese concepto se basan la mayoría de las pseudomodales como lightbox ;)

[Panino5001]

He intentado usar el script, pero sólo consigo que salga un mensaje con la información del ancho de mi ventana

Lógico, la idea era darte los datos. Tenés los datos, tenés las incógnitas, ahora te toca resolver el problema, que dependerá de las dimensiones de tu cuadro. Ejemplo: posición en x=(ancho de la ventana-ancho del cuadro)/2

[ceSharp]

Que bien explicado Panino!!

:)

Si con razón sabía yo que alguno me tenía que tapar la boca en este asunto.

Salu2

[GUSUM]

Mmmm...creo que no sigo Panino,
Para centrar verticalmente un elemento en cualquier ventana,¿tengo que saber el ancho de la ventana en mi monitor??

[Panino5001]

No. Lo que pasa es que la función te devuelve esos datos aunque no los uses. Lo del ancho era sólo un ejemplo.
Para centrar verticalmente, si la página no usa scroll vertical, tenés que usar el alto del viewport solamente. Si hay scroll, tendrás que sumarle al alto del viewport la porción de scroll vertical correspondiente para hacer tus cálculos.
Empezá a probar y luego seguimos.

[GUSUM]

Gracias, Panino.

[GUSUM]

Bueno, finalmente lo solucioné con CSS.
Gracias igual!!