Position absolue et centrages d'un élement HTML

Petite introduction à la manière dont on peut obtenir le centrage, à la fois vertical et horizontal, d'un élément HTML positionné en absolue.

Présentation

Nous souhaitons positionner un élément à l'intérieur d'un autre élément, plus précisément nous voulons avoir la possibilité de la placer au quatre coins de l'élément parent, centrer horizontalement ou verticalement ainsi que définir une position précise.

<div class="container">
    <div class="box">
    </div>
</div>
Code HTML pour le positionnement d'un élément « box » à l'intérieur d'un élément « container ».

Pour la lisibilité du texte, nous appliquerons une hauteur définie au conteneur et une couleur de fond rouge à l'élément que l'on souhaite positionner.

.container { 
    position: relative;
    height: 100px;
}
.box {
    position: absolute;
    background: #f00;
    margin: 0;
    width: 20px;
    height: 20px;
}
Règles CSS appliquées aux éléments.
Rendu du code HTML avec les règles CSS de base appliquées.

L'alignement se fera par l'intermédiaire de 6 classes, qui permettront de définir 3 positions sur l'axe des abscisses et 3 sur celui des ordonnées :

  • hStart, pour un alignement horizontal à gauche.
  • hCenter, pour un alignement horizontal centré.
  • hEnd, un alignement horizontal à droite.
  • vStart, un alignement vertical en haut.
  • vCenter, un alignement vertical au milieu.
  • vEnd, un alignement vertical en bas.

Le positionnement de l'élément sera donc la résultante de la combinaison de deux classes, la première pour le vecteur horizontal (hStart, hCenter ou hEnd), la seconde pour le vecteur vertical (vStart, vCenter ou vEnd).

Positionnement aux quatres coins

Les positionnements aux quatres coins du conteneur peuvent s'obtenir aisément en utilisant les 4 propriétés CSS de position : top, right, bottom et left.

/* Positionnement horizontal à gauche */
.hStart {
    left: 0;
}

/* Positionnement horizontal à droite */
.hEnd {
    right: 0;
}

/* Positionnement vertical en haut */
.vStart {
    top: 0;
}

/* Positionnement vertical en bas */
.vEnd {
    bottom: 0;
}
Règles CSS de positionnement aux 4 coins du conteneur.
<div class="container">
    <div class="box hStart vStart"></div>
    <div class="box hEnd vStart"></div>
    <div class="box hStart vEnd"></div>
    <div class="box hEnd vEnd"></div>
</div>
Code HTML de test du positionnement aux 4 coins du conteneur.
Rendu du positionnement aux 4 coins du conteneur.

Centrages

Pour les positions centrées, il faut jouer avec le couple de propriétés dédié à chaque axe (top et bottom pour l'axe vertical, left et right pour l'axe horizontal) ainsi que sur les marges externes (margin) de la boîte.

/* Centrage vertical */
.vCenter {
    bottom: 0; 
    top: 0; 
    margin-top: auto; 
    margin-bottom: auto; 
}

/* Centrage horizontal */
.hCenter { 
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
}
Règles CSS pour le centrage de l'élément dans un conteneur.

Nous avons vu que dans certains cas, la déclarations des 2 propriétés de position liées à un axe permettent d'étendre la taille de la boîte ; ici, les tailles étant explicitement déclarées, elles prévalent. L'alignement centré s'obtient grâce à la valeur « auto » appliquée aux marges externes et le calcul de la position que doivent effectuer les navigateurs web suivant les spécifications CSS :

If none of the three ['left', 'width', and 'right'] is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values [...]

[...]

If none of the three ['top', 'height', and 'bottom'] are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values.

Visual formatting model details
<div class="container">
    <div class="box hCenter vStart"></div>
    <div class="box hEnd vCenter"></div>
    <div class="box hCenter vEnd"></div>
    <div class="box hStart vCenter"></div>
    <div class="box hCenter vCenter"></div>
</div>
Code HTML de test pour les positionnements centrés.
Rendu du test pour les positionnement centrés.

Démonstration

Ressources et références

Titre
CSS 2.1 Specification
Auteurs
Bert BOS
Auteurs
Tantek ÇELIK
Auteurs
Ian HICKSON
Auteurs
Lie WIUM
Editeur
W3C
Date
Chapitre
Visual formatting model details
Titre
Position absolue et taille des éléments HTML
Auteur
Rui NIBAU
Editeur
Omacronides
Date