DEVENIR-WEBMASTER.COM Log In
 25
close

Le centrage horizontal et vertical en CSS

Visiter ma chaine Youtube

# Le centrage horizontal close

La technique à utiliser dépend du type de l'élément.

Centrage horizontal des éléments de type block

Pour centrer horizontalement un élément de type block il faut lui donner une taille et positionner des marges dessus. Vérifier bien que vous avez positionné la taille car c'est un oubli assez fréquent. Les marges extérieures droite et gauche doivent être placées à la valeur auto.

Demo ici

Le centrage horizontal de type block

Centrage horizontal des éléments de type inline ou des éléments embarqués

Pour centrer horizontalement un élément de type inline ou un élément embarqué il faut dire au conteneur de centrer le contenu. Pour cela vous devez utiliser la propriété text-align avec la valeur center.

Demo ici

Le centrage horizontal de type inline

# Centrage vertical avec le margin auto close

Vous pouvez utiliser le mécanisme des marges auto pour centrer verticalement.

Ça ne fonctionnera que si le conteneur est en display:flex;. Si il est en display:block; vous allez vous heurter à d'autres mécanismes au niveau des marges.

Le code CSS d'un centrage vertical avec table-cell
Le code HTML d'un centrage vertical avec table-cell

Demo ici

# Centrage vertical avec display:table-cell close

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 la communauté des webmasters mais qui est clairement clos aujourd'hui.

Le code CSS d'un centrage vertical avec table-cell
Le code HTML d'un centrage vertical avec table-cell

Demo ici

# Centrage vertical avec line-height close

Si vous avez une seule ligne de texte dans un conteneur, vous pouvez utiliser la technique du line-height.

Technique du centrage vertical avec line height

Line-height signifie hauteur de ligne. Il suffit de caler le line-height sur la hauteur du conteneur.

Le texte est centré par défaut au milieu du line-height.

En CSS Le centrage vertical avec line height
En HTML Le centrage vertical avec line height

Demo ici