Javascript – Centrar verticalmente una página Web

Mayo 2017


Tratar de centrar verticalmente una página Web con CSS es una perdida de tiempo. La solución más práctica consiste en utilizar JavaScript.



1. El archivo .js


Copia este script y pégalo en un archivo llamado por ejemplo: centrar.js

function align()
{

	var lmt = document.getElementById('centrado');
	var container = document.documentElement;

	if(lmt && container)
	{
	    var containerHeight;
	    if (container.innerWidth)
	    {
            containerHeight = container.innerHeight;
		}
		else
		{
            containerHeight = container.clientHeight;
		}
	    var lmtHeight;
	    if (lmt.innerWidth)
	    {
            lmtHeight = lmt.innerHeight;
		}
		else
		{
            lmtHeight = lmt.offsetHeight;
		}
		var y = Math.ceil((containerHeight - lmtHeight) / 2);
		if(y < 0)
		{
			y = 0;
		}
		lmt.style.position = "relativa";
		lmt.style.top = y + "px";
	}
	if (document.getElementById)
	{
		document.body.style.visibility = 'visible';
	}

}

function addevent(obj,evt,fn,capt){
	if(obj.addEventListener)
	{
		obj.addEventListener(evt, fn, capt);
		return true;
	}
	else if(obj.attachEvent)
	{
		obj.attachEvent('on'+evt, fn);
		return true;
	}
	else return false;
}

if (document.getElementById && document.getElementsByTagName)
{
	addevent(window, 'load', align, false);
	addevent(window, 'resize', align, false);
}

2. La página .html


Para que la página este centrada, es necesario llamar al archivo .js.
La página será mostrada así:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="es" xmlns="http://www.w3.org/1999/xhtml" xml:lang=
"es">
	<head>
		<!-- [...] -->
		<script type="texto/javascript" src="centrar.js">
</script>
	</head>
	<body>
		<div id="centrado">

		<!—Ponga el código de su página aquí. Este será
 centrado -->
		
		</div>
	</body>
</html>

3. Uso


La función align() de JavaScript definida en el archivo .js recuperará el contenido que debe ser centrado. En este ejemplo, el elemento que lleva el identificador [id="centrado"] es el que será centrado.

var lmt = document.getElementById('centrado');


De este modo, en el ejemplo de la página .html, el contenido situado en el elemento <div id="centrado"></div> es el que será centrado.

4. Inconveniente


Esto sólo funcionará si el usuario tiene Javascript activado en su navegador.

5. A tener en cuenta


Como todo en Javascript esto no es más que una forma de embellecer la página. Siempre deberían existir soluciones alternativas en el caso de que el usuario no tenga activado el soporte de este lenguaje.

En el presente caso, esto no es posible. Pero su uso no impide para nada la navegación si el soporte está desactivado.

Consulta también

Artículo original escrito por . Traducido por Carlos-vialfa. Última actualización: 6 de abril de 2009 a las 22:38 por Carlos-vialfa.
El documento «Javascript – Centrar verticalmente una página Web» se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo libremente. No olvides citar a CCM (es.ccm.net) como tu fuente de información.