open

Le centrage horizontal et vertical en CSS

#1 Le centrage horizontal des éléments de type block open

  1. Pour centrer horizontalement un élément de type block dans un autre élément de type block (ici le body) il faut lui donner une taille et demander au moteur de rendu de calculer automatiquement les marges gauche et droite ce qui centrera automatiquement le block.
  2. Pour cela vous devez faire la déclaration margin: 0 auto;. J'ai mis un 0 pour le premier chiffre. Ce chiffre concerne les marges haute et basse qui n'ont rien à voir avec le centrage horizontal. Vous mettez celui dont vous avez besoin.
  3. Ensuite j'ai mis auto pour demander au moteur de rendu de faire le calcul automatique des marges gauche et droite.
  4. Vérifier bien que vous avez déclaré la taille car c'est un oubli assez fréquent et si le moteur de rendu ne connaît pas la taille de l'élément il est incapable de calculer les marges gauche et droite.
Le centrage horizontal des éléments de type block
Tester le code

#2 Le centrage horizontal du contenu des éléments de type block open

Maintenant on va regarder comment centrer dans un block un élément de type inline ou inline-block ou un élément embarqué type image ou vidéo. Pour centrer ces éléments vous devez utiliser la propriété text-align avec la valeur center.

Notez bien que l'on sélectionne le conteneur et que l'on met cette déclaration dans le bloc qui va avec cette sélection. Autrement dit on demande au conteneur de centrer son contenu.

Le centrage horizontal du contenu des éléments de type block
Tester le code

#3 Centrage horizontal et vertical avec une flexbox open

Avec une flexbox, vous pouvez utiliser le mécanisme du calcul des marges auto pour centrer horizontalement et aussi verticalement.

Ci-dessous je centre horizontalement et verticalement un block div#contenu dans un bloc div#conteneur. Le contenu textuel de div#contenu n'est pas géré. Je pourrais facilement centrer horizontalement ce contenu textuel avec un text-align:center; . Pour son centrage vertical on verra plus tard.

Tester le code

Dans la technique que je vous ai présenté au-dessus j'interviens sur les marges du flex-item de manière à le centrer dans le flex-container. Ce n'est pas vraiment logique car en flexbox c'est le flex-container qui contrôle les flex-items.

Ci-dessous j'utilise une autre technique qui fait appel aux propriétés justify-content et align-items qui sont des propriétés du flex-container qui permettent justement le contrôle des flex-items. Le résultat est le même mais on est plus dans la logique de conception des flexbox.

Tester le code

#4 Centrage vertical avec display:table-cell open

Vous pouvez demander à un conteneur de se comporter comme une cellule de tableau en mettant en CSS le display à la valeur table-cell. Les cellules de tableau ont l'avantage d'être dotées de la propriété vertical-align avec la valeur middle.

Cette technique vous permet d'obtenir un comportement de cellule de tableau sans utiliser l'élément table en HTML. Je vous rappelle que l'élément table est à utiliser pour faire des tableaux mais pas des conteneurs. Il s'agit là d'un vieux débat qui a agité il y a 10 ans (~2010) la communauté des webmasters mais qui est clairement clos aujourd'hui.

Le problème c'est que vous n'avez pas toujours le contrôle du display. Si par exemple vous êtes dans un div qui est un flex-item sous contrôle d'un autre div qui est un flex-container alors vous pouvez mettre ce que vous voulez sur le display du flex-item. Ce ne sera pas pris en compte.

Un autre inconvénient de la technique ci dessous c'est que vous avez une largeur fixe en pixels. Si vous mettez une largeur en pourcentage il ne va rien comprendre.

Centrage vertical avec display:table-cell;
Tester le code

Par rapport aux inconvénients cités ci-dessus je peux rajouter un container div qui va jouer le rôle du tableau html. Dans ce cas je crée, je simule en CSS un tableau à une cellule avec un display:table; sur le div#tableau et un display:table-cell; sur le div#cellule.

Ci-dessous j'ai l'avantage d'avoir un conteneur qui est étirable car je choisis un width en pourcentage. Ca peut être un avantage mais bien sûr ça n'est pas obligatoire. Je peux également centrer horizontalement mon conteneur div#tableau avec un margin: 0 auto; car c'est un conteneur de type block.

Tester le code

#5 Centrage vertical avec line-height open

Si vous avez une seule ligne de texte dans un conteneur et que vous êtes sûr que ça restera comme ça quel que soit la taille de la fenêtre alors vous pouvez utiliser la technique du line-height. Line-height signifie hauteur de ligne. Il suffit de mettre dans le conteneur un paragraphe avec une hauteur de ligne qui soit la même que la hauteur du conteneur.

Technique du centrage vertical avec line height
Tester le code

#6 Centrage horizontal et vertical avec margin et transform:translate open

Pour présenter l'intérêt de cette technique j'ai choisi de centrer horizontalement et verticalement le contenu des flex-items d'une flexbox. J'ai choisi cet exemple car il n'est pas possible de gérer le display d'un flex-item. Si vous mettez un display:table-cell; sur un flex-item il ne le prendra pas. Il ne le prendra pas car le flex-item est sous le contrôle d'un conteneur en display flex.

Donc je suis bloqué pour le centrage vertical du contenu de mes flex-items. Je vais donc utiliser une autre technique.

  1. Je vais prendre des conteneurs div de la classe content que je vais placer dans chaque flex-item. Je vais les déplacer horizontalement et verticalement de 50% de la taille du flex-item en mettant des marges.
    Décalage avec des marges
  2. Ensuite je vais translater ces div.content au moyen d'un transform:translate. Cette fois je vais translater de 50% de la taille d'un div.content sur la gauche et vers le haut en prenant une valeur négative.

En décalant avec des marges, tous les éléments restent dans le flux. Il existe une autre technique connue et presque similaire qui passe par un positionnement en absolue des div.content mais elle a l'inconvénient de sortir les div.content du flux.

Décalage avec transform:translate
Tester le code