Il n’est pas rare de devoir centrer un élément par rapport à la fenêtre, que ce soit horizontalement ou verticalement, ou les deux. Nous allons ici voir comment faire.

Obtenir la taille de l’écran

Pour centrer un élément, il nous faut la taille de l’écran, ou plutôt la taille de la fenêtre, et même plus précisément, les dimensions de la zone d’affichage. Pour cela, c’est très simple :

var largeur_fenetre = $(window).width();
var hauteur_fenetre = $(window).height();

Centrer un élément

Commençons par écrire ce qu’on connaît déjà pour centrer un élément :

function centrerElement(element)
{
	var largeur_fenetre = $(window).width();
	var hauteur_fenetre = $(window).height();
}

Le paramètre est un élément jQuery (obtenu avec $()).

Il nous faut maintenant modifier la position de cet élément. Là, deux méthodes : soit on fait un positionnement fixe, soit on fait un positionnement absolu. Pour rappel, le positionnement fixe est là pour faire en sorte que l’élément placé ne bouge jamais de sa position sur l’écran, quel que soit le scroll appliqué à la page (on peut bouger autant qu’on veut, l’élément restera bien campé sur sa position).

Commençons par voir le plus simple : le positionnement fixe. Dans ce positionnement, il faut considérer que les dimensions de la page n’excèdent pas celles de la zone visible (celles que l’on a calculées plus haut). En effet, si on indique que le haut est à une valeur plus élevée que la hauteur de la zone visible, on sort de l’écran… Et vu que l’élément bouge aussi quand on bouge la page, on a beau descendre, on ne verra jamais notre bel élément…

Il nous faut donc les coordonnées du point en haut à gauche de l’élément (les coordonnées voulues). Pour cela réfléchissons et allons-y par étapes. Si nous indiquons comme valeur du haut la moitié de la hauteur de l’écran, le haut sera bien centré, mais pas l’élément lui-même. Il faut donc retirer la moitié de la hauteur de l’élément, et le tour est joué :

var haut = (hauteur_fenetre / 2) - (element.height() / 2);

On peut tenir le même raisonnement pour le côté gauche :

var gauche = (largeur_fenetre / 2) - (element.width() / 2);

Il nous suffit d’appliquer ces coordonnées :

element.css({position: 'fixed', top: haut, left: gauche});

Pour le positionnement absolu, on agit de la même manière, à une petite particularité près : il faut prendre en compte la position du visiteur par rapport à la page. On obtient ceci assez facilement avec jQuery, je vous donne donc la réponse tout de suite :

var haut = (hauteur_fenetre / 2) - (element.height() / 2) + $(window).scrollTop();
var gauche = (largeur_fenetre / 2) - (element.width() / 2) + $(window).scrollLeft();
element.css({position: 'absolute', top: haut, left: gauche});

En résumé

Voici donc le code final, j’ai mis deux fonctions car deux types de positionnement, mais à vous de choisir la méthode qui vous convient.

function centrerElementFixe(element)
{
	var largeur_fenetre = $(window).width();
	var hauteur_fenetre = $(window).height();

	var haut = (hauteur_fenetre - element.height()) / 2;
	var gauche = (largeur_fenetre - element.width()) / 2;
	element.css({position: 'fixed', top: haut, left: gauche});
}

function centrerElementAbsolu(element)
{
	var largeur_fenetre = $(window).width();
	var hauteur_fenetre = $(window).height();

	var haut = (hauteur_fenetre - element.height()) / 2 + $(window).scrollTop();
	var gauche = (largeur_fenetre - element.width()) / 2 + $(window).scrollLeft();
	element.css({position: 'absolute', top: haut, left: gauche});
}

À noter qu’il faut également penser aux bordures et marges si votre élément en possède…