Centrer horizontalement ou verticalement un élément HTML en CSS

Aujourd’hui, je vous présente différentes techniques pour centrer des éléments HTML en utilisant du CSS.

Avant tout, il va falloir distinguer différents cas selon le type de centrage souhaité (on peut centrer un élément HTML horizontalement ou centrer un élément HTML verticalement) et selon le type d’élément (block ou inline) à centrer.

En effet, un élément HTML de type block comme un div ou un paragraphe (élément p ne se centre pas de la même façon qu’un élément HTML de type inline comme un span, un lien (élément a) ou un bouton (élément button) tout simplement car ces types d’éléments possèdent des propriétés différentes.

Cet article traite ces différents cas et notamment :

  • Comment centrer horizontalement un élément HTML de type inline ;
  • Comment centrer horizontalement un élément HTML de type block ;
  • Comment centrer verticalement un élément HTML de type inline ;
  • Comment centrer verticalement un élément HTML de type block.

Nous allons également apprendre à centrer horizontalement ou verticalement n’importe quel élément en le transformant en élément flexibles ou en élément de grille et en utilisant donc les propriétés du flexbox ou des grilles.





 

Centrer horizontalement un élément HTML

Commençons par le type de centrage le plus simple : le centrage horizontal. Le CSS nous fournit plusieurs options pour réaliser un centrage parfait en fonction du type et du nombre d’éléments HTML que l’on souhaite centrer.

Centrer horizontalement un élément de type inline

Les éléments de type inline n’occupent que l’espace nécessaire à l’affichage de leur contenu dans leur élément parent.

On va pouvoir centrer ce type d’éléments en appliquant un text-align : center à l’élément conteneur (élément parent) de type block contenant l’élément inline en question. Cela aura pour effet de centrer tous les éléments inline dans cet élément block.

Regardez plutôt l’exemple suivant :

Code HTML :

See the Pen
Centrer un élément HTML inline horizontalement
by Pierre (@pierregiraud)
on CodePen.

Code CSS :

See the Pen
Centrer un élément HTML inline horizontalement
by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
Centrer un élément HTML inline horizontalement
by Pierre (@pierregiraud)
on CodePen.

Dans cet exemple, on définit deux éléments div qui sont des éléments de type block et on leur ajoute un attribut class="centre" qui va nous servir pour leur ajouter des styles en CSS ensuite.

Notre premier div ne contient qu’un élément span. Notre deuxième idv contient deux éléments incline à la suite : un lien et un bouton.

On applique ensuite un text-align: center à notre classe .centre. Comme vous pouvez le voir, cela a pour effet de centrer tous les éléments inline contenus dans les éléments block possédant cette classe.

Comme notre deuxième div contient deux éléments inline à la suite, ces deux éléments seront centrés sur la même ligne, côte-côte, ce qui correspond au comportement normal d’un élément inline.

Centrer horizontalement un élément de type block

Le moyen le plus simple de centrer un élément de type block dans son élément parent est d’utiliser la propriété margin et sa valeur auto.

Je vous rappelle ici que les éléments de type block occupent tout l’espace disponible au sein de leur élément parent par défaut. Afin de voir l’effet d’un quelconque alignement, il va avant tout falloir définir une largeur plus petite que celle de l’élément parent. On va pouvoir faire cela avec la propriété width.

Nous allons cette fois-ci appliquer toutes ces propriétés CSS à l’élément en centrer directement et non pas à l’élément conteneur.

Illustrons immédiatement cela avec un exemple :

Code HTML :

See the Pen
Centrer un élément HTML block horizontalement
by Pierre (@pierregiraud)
on CodePen.

Code CSS :

See the Pen
Centrer un élément HTML block horizontalement
by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
Centrer un élément HTML block horizontalement
by Pierre (@pierregiraud)
on CodePen.

Ici, le sélecteur .centre p nous permet de ne sélectionner que les éléments p situés dans des éléments possédant un attribut class="centre". On applique un margin: 0 auto à ces paragraphes. Le reste des styles des appliqué à tous les paragraphes de la page.

 

Utiliser les propriétés du flexbox ou des grilles pour centrer n’importe quel élément HTML horizontalement

Ces dernières années, deux nouveaux modèles de disposition très puissants ont vu le jour en CSS : le modèle des boites flexibles ou flexbox d’abord puis le modèle des grilles. Ces deux modèles fonctionnent sur le principe d’axes principal et secondaire ou horizontal et vertical et vont nous permettre de disposer simplement nos différents éléments HTML le long de ces axes.

Pour utiliser le modèle des grilles, nous allons appliquer un display="flex" à un élément conteneur tandis qu’on appliquera un display="grid" pour utiliser le modèle des grilles.

Notez bien ici qu’en faisant cela les éléments contenus dans ces éléments deviendront automatiquement des éléments flexibles ou de grilles et vont ainsi perdre leurs propriétés d’éléments inline ou block et se comporter différemment.

Ces deux modèles ont certaines propriétés en commun. La propriété qui va nous intéresser ici est la propriété justify-content qui permet de centrer les éléments flexibles dans leur axe principal (qui est l’axe horizontal par défaut) ou de centrer les éléments de grille dans l’axe horizontal.

L’intérêt principal de ces deux modèles est qu’ils vont nous permettre de disposer n’importe quel élément et d’aligner simples un ou plusieurs éléments horizontalement et verticalement (cela est d’autant plus vrai pour le modèle des grilles).

Illustrons immédiatement cela avec quelques exemples :

Code HTML :

See the Pen
Centrer un élément HTML horizontalement avec le flexbox ou les grilles
by Pierre (@pierregiraud)
on CodePen.

Code CSS :

See the Pen
Centrer un élément HTML horizontalement avec le flexbox ou les grilles
by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
Centrer un élément HTML horizontalement avec le flexbox ou les grilles
by Pierre (@pierregiraud)
on CodePen.

Dans cet exemple, nos deux premiers div sont des conteneurs flexibles tandis que nos deux derniers div sont des conteneurs de grille. A chaque fois, on tente de centrer un élément puis deux éléments.

Le modèle des boites flexibles fonctionne sur le principe d’un axe principal et d’un axe secondaire. Par défaut, l’axe principal est l’axe horizontal. Pour centrer des éléments flexibles selon cet axe principal, on utilise la propriété justify-content : center qu’on applique au conteneur flexible.

Le système des grilles est un système totalement bi-axial. Il n’y a plus d’axe principal et secondaire, simplement un axe horizontal et vertical. Pour créer une grille, on va d’abord devoir définir des colonnes et des lignes avec les propriétés grid-template-columns et grid-template-rows. Ici, on omet grid-template-rows car nos grilles ne vont contenir qu’une ligne. Le ou les pourcentages passés à ces propriétés vont représenter la place prises dans la grille par chaque colonne. Dans le cas présent, notre première grille ne contient qu’une colonne qui occupe toute la place dans la grille tandis que notre deuxième grille contient deux colonnes qui occupent chacune 50% de l’espace dans la grille.

Par défaut, les éléments de grille vont s’étendre horizontalement pour occuper tout l’espace dans leur colonne. On va déjà devoir corriger ce comportement si on souhaite voir l’effet d’un quelconque alignement. On utilise pour cela la propriété justify-items. Ensuite, on utilise justify-content pour centrer les éléments à proprement parler au sein de leur colonne.

 

Centrer horizontalement un élément retiré du flux normal de la page

Certaines propriétés CSS permettent de retirer des éléments HTML du flux normal de la page, c’est-à-dire de les “sortir” d’un endroit de la page pour les replacer ailleurs, à la place ou par dessus d’autres éléments.

Dans ces cas là, on ne pourra pas centrer (entre autres choses) un élément avec une méthode conventionnelle. Le cas le plus connu est celui des éléments positionnés de manière absolue avec position: absolute. Pour centrer un élément positionné absolument, nous allons utiliser les propriétés left et transform de la façon suivante :

Code HTML :

See the Pen
Centrer un élément positionné absolument horizontalement
by Pierre (@pierregiraud)
on CodePen.

Code CSS :

See the Pen
Centrer un élément positionné absolument horizontalement
by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
Centrer un élément positionné absolument horizontalement
by Pierre (@pierregiraud)
on CodePen.





 

Centrer verticalement un élément HTML

Le centrage vertical des éléments HTML a longtemps été beaucoup plus délicat que le centrage horizontal, résultant souvent dans le cassage du design général d’une page et avec des éléments se chevauchant. Les modèles des boites flexibles et des grilles nous offrent toutefois aujourd’hui d’excellentes options pour aligner et centrer verticalement nos éléments.

Les méthodes traditionnelles pour centrer verticalement des éléments inline ou block

Traditionnellement, nous étions obligé de recourir à des tricks et des hacks CSS pour tenter de centrer verticalement des éléments dans un élément conteneur puisque le CSS n’offrait jusqu’à récemment pas d’option viable pour effectuer ce type de centrage.

Pour centrer un élément inline seul et monoligne, par exemple, un hack connu consiste à passer un line-height au conteneur égal à sa hauteur. Attention cependant : si votre conteneur possède plusieurs lignes de contenu, les lignes suivantes se retrouveront en dehors de celui-ci !

Une autre technique pour centrer verticalement un élément qui s’étendrait sur plusieurs lignes va être d’utiliser la propriété vertical-align. Pour que cela fonctionne correctement, il faudra ici cependant passer un display: table au conteneur et un display: table-cell à l’élément que l’on souhaite centrer, ce qui peut rapidement devenir contraignant.

Code HTML :

See the Pen
Centrer un élément inline ou block verticalement
by Pierre (@pierregiraud)
on CodePen.

Code CSS :

See the Pen
Centrer un élément inline ou block verticalement
by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
Centrer un élément inline ou block verticalement
by Pierre (@pierregiraud)
on CodePen.

Centrer verticalement un élément en utilisant le flexbox ou les grilles

Les modèles du flexbox et des grilles en particulier nous fournissent aujourd’hui de bien meilleures options pour centrer verticalement nos éléments HTML dans leur conteneur.

Pour centrer verticalement un élément en utilisant le modèle des boites flexibles, il suffit de définir l’axe vertical comme axe principal et d’utiliser à nouveau justify-content:center, tout simplement.

Si pour une raison ou une autre on souhaite conserver l’axe horizontal comme axe principal, on peut également utiliser la propriété align-items qui aligne les éléments selon l’axe secondaire.

Code HTML :

See the Pen
Centrer verticalement un élément avec le flexbox
by Pierre (@pierregiraud)
on CodePen.

Code CSS :

See the Pen
Centrer verticalement un élément avec le flexbox
by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
Centrer verticalement un élément avec le flexbox
by Pierre (@pierregiraud)
on CodePen.

Le système des grilles ne possède pas de notion d’axe “principal” ou d’axe “secondaire” : on a simplement un axe horizontal et un axe vertical qu’on va pouvoir utiliser de la même façon. Il suffit ainsi d’utiliser la propriété align-items pour centrer les éléments verticalement dans leur ligne de grille.

Code HTML :

See the Pen
Centrer verticalement un élément avec ls grilles
by Pierre (@pierregiraud)
on CodePen.

Code CSS :

See the Pen
Centrer verticalement un élément avec ls grilles
by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
Centrer verticalement un élément avec ls grilles
by Pierre (@pierregiraud)
on CodePen.

Centrer verticalement un élément retiré du flux normal de la page

Enfin, on va pouvoir utiliser la même technique vue précédemment pour le centrage horizontal pour centrer verticalement des éléments retirés du flux normal de la page et notamment des éléments positionnés avec position:absolute.

Code HTML :

See the Pen
Centrer verticalement un élément retiré du flux
by Pierre (@pierregiraud)
on CodePen.

Code CSS :

See the Pen
Centrer verticalement un élément retiré du flux
by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
Centrer verticalement un élément retiré du flux
by Pierre (@pierregiraud)
on CodePen.





 

Conclusion : centrage horizontal et vertical d’un élément HTML

Pour centrer parfaitement un élément dans son conteneur, c’est-à-dire pour le centrer à la fois horizontalement et verticalement, la meilleure solution aujourd’hui reste d’utiliser le flexbox ou le modèle des grilles ou éventuellement la méthode précédente si l’élément à centrer est retiré du flux normal de la page.

Code HTML :

See the Pen
Centrer horizontalement et verticalement un élément HTML en CSS
by Pierre (@pierregiraud)
on CodePen.

Code CSS :

See the Pen
Centrer horizontalement et verticalement un élément HTML en CSS
by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
Centrer horizontalement et verticalement un élément HTML en CSS
by Pierre (@pierregiraud)
on CodePen.


1 réflexion au sujet de “Centrer horizontalement ou verticalement un élément HTML en CSS”

Laisser un commentaire