Comment centrer une image en CSS ?

Centrer une image en CSS est une procédure de mise en forme utile pour améliorer l'aspect de la page web. Les différents éléments doivent en effet être disposés de manière harmonieuse, pour un rendu visuel esthétique et conforme à la charte graphique du site. Positionner une image au centre permet également de la mettre en valeur. Plusieurs méthodes permettent de centrer horizontalement et verticalement une image, à l'intérieur de son élément de bloc. Avec la dernière version HTML5, il est recommandé d'utiliser une propriété CSS, appliquée à l'élément image du code HTML.

Centrer des éléments inline vs. block

Une image est un élément HTML. Les éléments étaient historiquement classés en deux types : les éléments inline et les éléments div.

• Les éléments inline s'insèrent dans le flux du contenu, sans marquer de rupture visuelle.
• Les éléments block, signalés par exemple par la syntaxe < div >, créent un bloc matérialisé par des sauts de ligne.

Sur cette infographie, le bouton « Click me » s'affiche d'abord en tant qu'élément inline, puis en tant qu'élément block. En tant qu'élément inline, le bouton apparaît dans le texte. En tant qu'élément block, le bouton apparaît de manière distincte, avec un saut de ligne avant et après.

L'élément HTML image < img > est un élément de type inline. Pour centrer une image en CSS, quelle que soit la méthode utilisée, il faut donc commencer par la placer dans un élément de type block, tel qu'un < div > : l'image est ainsi centrée, horizontalement ou verticalement, à l'intérieur du bloc.

Centrer une image avec la propriété CSS margin

La propriété CSS margin permet de déterminer la taille des marges de l'élément. C'est-à-dire qu'en fonction de la valeur attribuée à la propriété, le navigateur crée plus ou moins d'espace à l'extérieur de l'élément. C'est la valeur auto qui permet de centrer l'élément.

La propriété margin ne fonctionne pas avec les éléments de type inline tels que l'élément image < img >. Pour centrer une image avec la propriété margin: auto, il faut donc la convertir en élément de bloc en utilisant une propriété CSS display.

1. Définir la taille à laquelle afficher l'image, avec la propriété width.
2. Indiquer la propriété display: block, pour transformer l'image en élément de bloc : un saut de ligne est créé avant et après l'image.
3. Renseigner la propriété margin: auto. La taille de la marge est identique à droite et à gauche de l'image : l'image est centrée.

Exemple :

See the Pen centrer-image-css_margin by HubSpot France (@HubSpot-France) on CodePen.

Centrer une image avec la propriété CSS display: flex

Pour utiliser cette deuxième méthode, il faut d'abord placer l'image dans un élément de bloc de type < div > dans le code HTML. Dans le code CSS, il faut attribuer au < div > les propriétés suivantes :

1. display: flex, pour indiquer que l'image contenue dans le < div > est flexible.
2. justify-content: center, pour modifier les dimensions de l'image de manière à la centrer horizontalement.

Exemple :

See the Pen centrer-image-css_display-flex by HubSpot France (@HubSpot-France) on CodePen.

La propriété CSS display: flex permet également de centrer l'image verticalement, à l'intérieur de son élément de bloc, avec la propriété align-items: center. Pour centrer l'image horizontalement et verticalement à l'intérieur de son élément de bloc, il faut attribuer au < div >, dans le code CSS, les propriétés : display: flex, justify-content: center, et align-items: center.

Dans cet exemple, des bordures ont été ajoutées à l'élément de bloc pour mieux visualiser la position centrale de l'image à l'intérieur de l'élément :

See the Pen centrer-image-css_display-flex-vertical by HubSpot France (@HubSpot-France) on CodePen.

Centrer une image avec la propriété CSS position

Cette méthode pour centrer une image en CSS nécessite un code plus complexe. L'image < img > est insérée dans un élément de bloc, un < div > par exemple, puis des propriétés sont attribuées à l'élément < div > d'une part, à l'élément < img > d'autre part.

1. La propriété position: relative est attribuée à l'élément < div >.
2. L'élément < img > prend les propriétés suivantes : position: absolute, top: 50% et left: 50%. Ces propriétés indiquent au navigateur de positionner le coin supérieur gauche de l'image au centre de la page : l'image n'est pas centrée, c'est son coin supérieur gauche qui l'est. Pour centrer l'image sur la page, il faut alors utiliser la propriété de translation transform: translate, et indiquer les valeurs -50% et -50%.

Exemple :

See the Pen centrer-image-css_position by HubSpot France (@HubSpot-France) on CodePen.

Centrer une image avec la balise HTML < center >

Cette méthode permet de centrer une image sans CSS, en utilisant uniquement du code HTML. À noter toutefois que centrer une image avec la balise HTML < center > ne fonctionne que jusqu'à HTML4.

1. Insérer l'image dans un élément de bloc tel qu'un < div >.
2. Attribuer à l'élément de bloc < div > la propriété text-align avec la valeur « center ». La syntaxe est la suivante : < div style="text-align: center" >.

Exemple :

See the Pen centrer-image-css_balise-center by HubSpot France (@HubSpot-France) on CodePen.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.