Placer un élément au centre de la fenêtre du navigateur

Je vais vous présenter une méthode pour placer un élément au milieu de la fenêtre du visiteur.
Nous utilisons ici 2 fonctions (qui peuvent être réunis en une seule si besoin est).

Retrouver la taille de la fenêtre

Voir l'article retrouver_la_taille_de_la_fenetre

javascript
function returnSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  var result = new Array(myWidth,myHeight);
  return result;
}

Positionner l'élément

javascript
function windowCenter(myId) {
	result=returnSize();
	var myWidth=result[0];
	var myHeight=result[1];
	var elementWidth=document.getElementById(myId).offsetWidth;
	var elementHeight=document.getElementById(myId).offsetHeight;
        var myScrollLeft=document.documentElement.scrollLeft;
	var myScrollTop=document.documentElement.scrollTop;
	var posX=myScrollLeft+myWidth-myWidth/2-elementWidth/2
	var posY=myScrollTop+myHeight-myHeight/2-elementHeight/2;
	document.getElementById(myId).style.left=posX+"px";
	document.getElementById(myId).style.top=posY+"px";
}

Il vous suffit ensuite d'appeler cette fonction quand bon vous semblera en précisant l'ID de l'élément à positionner.

exemple:

html4strict
<div id="monDiv">
Ce div ce placera au milieu
</div>
<a href="#" onclick="windowCenter('monDiv')">Cliquez ici</a>
Il est a noter que l'élément que vous voulez centré doit être positionné en “absolute”

Aperçu

Cliquez ici

Autre methode

Vous pouvez aussi centrer vos element avec du CSS

10/05/2006 11:35 -

ManiT4c
Gérant et chef de projet de l'agence web Op'art, je suis également webmaster freelance. Retrouvez moi également sur twitter.