centrar div horizontal y verticalmente

Laufwerk · #1 (**permalink**) 18/01/2008, 11:54

Hola amigos!!!
Tengo un problemilla que seguramente es muy simple para vosotros.
La cuestion es que quiero que un div de widht:410px; y un height:145px; siempre se me centre (tanto horizontal como verticalmente) sea la resolución que use el usuario.
Creo que queda bien explicado no?

Mil gracias!!

mpcmarcos · #2 (**permalink**) 18/01/2008, 17:26

Pues horizontalmente no presenta mucho problema, hay que utilizar text-align:center en el padre, lo de verticalmente ya presenta problema, ya que no hay manera.
Te adjunto un ejemplo rapido:

<div style="text-align:center">
<div style="widht:410px;height:145px;margin:auto">Texto a Centrar, el margin auto es necesario para firefox</div>
</div>

Panino5001 · #3 (**permalink**) 18/01/2008, 20:21

Esto debería moverse al foro de css, a menos que quieras hacerlo con javascript:

Código PHP:

  <div style="border:1px solid #000;position:absolute;width:410px; height:145px;top:50%;left:50%;margin-top:-72px;margin-left:-205px;">algo</div>

Con top y left posicionamos el vértice superior izquierdo justo en el centro y luego colocamos márgenes negativos iguales a la mitad de las dimensiones para terminar de centrar.
Con javascript, sería así:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script>
function getWindowData(){
    var widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal;
    if (typeof window.innerWidth != 'undefined'){
        widthViewport= window.innerWidth;
        heightViewport= window.innerHeight;
    }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];
}
function $(id){
return document.getElementById(id);
}
window.onload=window.onresize=window.onscroll=function(){
var data=getWindowData();
$('pp').style.left=data[0]/2+data[2]-parseInt($('pp').style.width)/2+'px';
$('pp').style.top=data[1]/2+data[3]-parseInt($('pp').style.height)/2+'px';
}
</script>

</head>

<body><div id="pp" style="border:1px solid #000;position:absolute;width:410px; height:145px;">algo</div>  
</body>
</html>

Laufwerk · #4 (**permalink**) 20/01/2008, 06:39

la idea es hacerlo en javascript.
Voy a probar el codigo y os digo algo.

Merci por adelantado

Laufwerk · #5 (**permalink**) 20/01/2008, 06:48

va de muerte!!! mil gracias Panino5001