Centrer un élément HTML verticalement et horizontalement

Vous souhaitez centrer un bloc horizontalement, verticalement ou les deux à la fois ? Voici quelques techniques qui permettent de le faire via les propriétés CSS.

Centrer un élément HTML horizontalement avec CSS

#monbloc {
margin:0 auto 0 auto;
width:400px;
height:200px;
}

Pour centrer horizontalement un bloc, il faut lui définir une largeur ainsi que des marges gauche et droite auto. Ceci fonctionne sur les éléments de type bloc (div, p, h1, …). Pour l’appliquer à des éléments en ligne, il faut ajouter la propriété : display:block.

Vous pouvez consulter la démonstration 1.

Centrer un élément HTML horizontalement et verticalement avec CSS

#monbloc {
width:400px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -200px;
}

Pour centrer le bloc horizontalement et verticalement avec CSS, il faut connaitre ses dimensions horizontale et verticale. En positionnant l’élément bloc de manière absolue, on le sort de son flux. Il suffit de placer le coin haut-gauche de ce bloc au centre de son premier parent positionné, la fenêtre du navigateur par exemple. Il reste ensuite à ajouter des marges haute et gauche négatives valant 50% des dimensions verticale et horizontale du bloc.

Vous pouvez consulter la démonstration 2.

Centrer un élément HTML horizontalement et verticalement avec jQuery

Les méthodes CSS ne fonctionnent qu’avec des blocs ayant des dimensions fixes. jQuery permet de gérer les autres cas.

$(document).ready(function() {
  // $(window).resize() est appelée chaque fois que la fenêtre est redimensionnée par l'utilisateur.
  $(window).resize(function() {
    $("#monbloc").css({
      position:'absolute',
      left:($(window).width() - $("#monbloc").outerWidth()) / 2,
      top:($(window).height() - $("#monbloc").outerHeight()) / 2
    });
  });
});

$(window).load(function() {
  // au chargement complet de la page, la fonction resize() est appelée une fois pour initialiser le centrage.
  $(window).resize(); 
});

Chaque fois que la page change de taille, lors d’un redimensionnement de la part d’un utilisateur par exemple, le centrage est recalculé. On utilise outerWidth() et outerHeight() car ces fonctions prennent en compte la largeur / hauteur totale du bloc incluant le padding et le bord. L’événement resize est simulé au chargement de la page pour effectuer le centrage initial. L’intérêt de cette méthode est qu’il n’est pas nécessaire de connaître la taille du bloc, en revanche, elle ne fonctionnera pas si javascript est désactivé sur le navigateur.

Vous pouvez consulter la démonstration 3.