Javascript - Centrer verticalement une page web

Décembre 2016

Pour centrer verticalement une page web, impossible de s'en sortir en css. Une solution bien pratique : JavaScript.





Merci à Dalida pour la source du fichier .js.

1. Le fichier .js


Copiez/collez ce script dans un fichier que vous nommerez par exemple : centrer.js

function align()
{

	var lmt = document.getElementById('centrage');
	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 = "relative";
		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 page .html


Pour que votre page soit centrée, il faut appeler le fichier .js.
La page se présentera ainsi :

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

		<!-- Mettez le code de votre page ici. Celui ci sera centré -->
		
		</div>
	</body>
</html>

3. Utilisation


La fonction javascript align() définie dans le .js va récupérer le contenu qui doit être centré. Dans cet exemple, c'est l'élément portant l'identifiant [id="centrage"] qui sera centré.
var lmt = document.getElementById('centrage');
Ainsi, dans l'exemple de page .html, c'est le contenu situé dans l'élément <div id="centrage"></div> qui sera centré.

4. Inconvénients


Bien évidemment, il s'agit d'un "bidouillage". Celui ci ne sera efficace qu'à la condition que l'utilisateur ait javascript activé dans son navigateur.

5. Rappel


Comme pour toute utilisation de javascript, il ne s'agit que d'un embellissement. Des solutions alternatives devraient toujours être proposées (malheureusement, certains semblent l'oublier !) au cas où l'internaute n'active pas le support de ce langage.

Dans le cas présent, ce n'est pas possible. Mais son utilisation n'empêche en rien la navigation si le support est désactivé. Encore une fois, ce n'est qu'un embellissement.

A voir également :

Ce document intitulé «  Javascript - Centrer verticalement une page web  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.