Comment centrer une image en CSS ?

Centrer une image en CSS est l'une des opérations de mise en forme les plus fréquentes en développement web. Bien que la manipulation semble anodine, elle suppose de comprendre comment les navigateurs interprètent les éléments HTML — et notamment la distinction fondamentale entre éléments inline et éléments block. Le logiciel CMS de HubSpot intègre un éditeur visuel qui permet aux équipes de structurer la mise en page de leurs pages web sans manipuler le CSS manuellement.

Quelle est la différence entre un élément inline et un élément block en CSS ?

Les caractéristiques des éléments inline et block

En HTML, les éléments se répartissent historiquement en deux grandes catégories : les éléments inline et les éléments block.

Les éléments inline s'insèrent dans le flux du contenu sans provoquer de rupture visuelle. Ils occupent uniquement l'espace nécessaire à leur affichage et peuvent cohabiter sur une même ligne avec d'autres éléments. Les balises <span>, <a> ou <strong> en sont des exemples courants.

Les éléments block, en revanche, occupent toute la largeur disponible de leur conteneur parent et créent automatiquement un saut de ligne avant et après eux. Les balises <div>, <p> ou <section> appartiennent à cette catégorie.

Sur cette infographie, un bouton « Click me » illustre les deux comportements : affiché en tant qu'élément inline, il s'intègre dans le flux de texte ; affiché en tant qu'élément block, il apparaît de manière distincte, avec un saut de ligne avant et après.

Pourquoi convertir <img> en élément block avant de le centrer ?

L'élément HTML <img> est inline par nature. Les propriétés CSS de centrage comme margin: auto ou justify-content ne s'appliquent pas aux éléments inline : elles nécessitent un contexte block ou flex pour fonctionner correctement. C'est pourquoi toute méthode de centrage en CSS commence par convertir l'image en élément block via la propriété display: block, ou par la placer dans un conteneur <div> auquel on applique display: flex.

Cette contrainte est bien connue des équipes front-end : selon le State of CSS 2023, Flexbox affiche un taux d'adoption de plus de 97 % parmi les développeurs interrogés, confirmant que la maîtrise du modèle de boîte CSS constitue aujourd'hui un fondamental incontournable du métier.

Quelles sont les méthodes CSS pour centrer une image ?

Centrer une image avec la propriété CSS margin

La propriété CSS margin détermine la taille des marges extérieures d'un élément. La valeur auto demande au navigateur de calculer automatiquement une marge égale de chaque côté, ce qui a pour effet de centrer horizontalement l'élément dans son conteneur.

La propriété margin ne fonctionnant pas sur les éléments inline, il faut au préalable transformer l'image en élément block. La procédure se décompose en trois étapes :

1. Définir la largeur d'affichage de l'image avec la propriété width.
2. Convertir l'image en élément block avec display: block : un saut de ligne est créé avant et après l'image.
3. Appliquer margin: auto pour égaliser les marges droite et gauche.

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

La méthode Flexbox offre davantage de souplesse que margin: auto. Elle opère au niveau du conteneur parent : l'image <img> est placée dans un <div>, auquel on attribue les propriétés suivantes dans le code CSS.

1. display: flex active le mode flexbox sur le conteneur.
2. justify-content: center centre l'image horizontalement à l'intérieur du bloc.

Exemple :

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

Flexbox permet également de centrer l'image verticalement à l'intérieur de son conteneur. Pour un centrage horizontal et vertical simultané, il suffit d'ajouter align-items: center au même <div>. L'exemple ci-dessous ajoute des bordures au bloc pour rendre visible le centrage vertical de l'image :

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 requiert un code plus complexe mais offre un contrôle précis du positionnement, particulièrement utile dans les mises en page avec superposition d'éléments. La procédure se décompose en deux niveaux.

Au niveau du conteneur <div> : la propriété position: relative établit ce bloc comme référentiel de positionnement pour ses éléments enfants.

Au niveau de l'image <img> :

1. position: absolute extrait l'image du flux normal du document.
2. top: 50% et left: 50% placent le coin supérieur gauche de l'image au centre du conteneur : l'image n'est pas encore centrée, seulement son coin.
3. transform: translate(-50%, -50%) décale ensuite l'image de la moitié de ses propres dimensions, ce qui en centre le point médian dans le bloc.

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 la balise <center> est obsolète depuis HTML5 et ne doit plus être utilisée dans les projets actuels.

1. Insérer l'image dans un élément de bloc tel qu'un <div>.
2. Attribuer à ce <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.

Gagnez du temps dans la gestion de votre code et de vos données

Téléchargez ce guide pour effectuer des vérifications et des changements en masse avec les regex et gagner en productivité.

• Qu'est-ce qu'une regex ?
• La structure d'une regex
• Des astuces d'utilisation
• Mémento sur les regex

Télécharger le guide En savoir plus Télécharger le guide

Télécharger

Tous les champs sont obligatoires.

Merci d'avoir soumis le formulaire

Cliquez sur le lien pour accéder au contenu en tout temps

Télécharger

Comment les webdesigners choisissent-ils la méthode CSS adaptée à leur mise en page ?

Critères pour choisir entre margin, flex et position selon le projet

Le choix entre les trois méthodes CSS dépend avant tout du contexte de mise en page et des contraintes du projet.

margin: auto convient aux situations simples où seul un centrage horizontal est nécessaire. C'est la solution la plus lisible et la plus compatible avec les anciens navigateurs. Elle reste préférée pour les images isolées dans une colonne de contenu, comme le corps d'un article de blog.

display: flex s'impose dès qu'un centrage vertical est requis, ou lorsque plusieurs éléments doivent être alignés les uns par rapport aux autres dans un même conteneur. Sa syntaxe déclarative au niveau du parent facilite la lecture du code et réduit les effets de bord.

position: absolute répond à des besoins de positionnement précis dans des interfaces complexes — images superposées, overlays, carrousels ou compositions en couches multiples. Cette méthode extrait l'élément du flux normal et nécessite une attention particulière pour préserver le comportement responsive de la mise en page.

Bonnes pratiques CSS pour la maintenabilité et la collaboration front-end

Quelle que soit la méthode retenue, quelques principes améliorent la maintenabilité du code et facilitent la collaboration au sein des équipes front-end.

Il est recommandé de privilégier display: flex pour les nouveaux projets : sa logique de conteneur parent rend les intentions explicites dans le code, et sa compatibilité navigateur est aujourd'hui totale. Mélanger plusieurs méthodes de centrage sur un même élément génère des comportements imprévisibles et complique la maintenance.

Les blocs de positionnement complexes, notamment les combinaisons position: absolute et transform: translate, gagnent à être commentés pour faciliter leur relecture. Centraliser les valeurs de mise en page dans des variables CSS (--gap, --max-width) simplifie les ajustements globaux. Le comportement responsive des images centrées sur mobile doit être systématiquement testé, en particulier lorsque des dimensions fixes ont été définies.

Comment HubSpot facilite-t-il la mise en page d'un site web ?

Un éditeur drag-and-drop sans écriture de code

Le Content Hub de HubSpot propose un constructeur de pages par glisser-déposer qui permet aux équipes marketing de structurer et modifier la mise en page de manière autonome, sans écrire une seule ligne de code. L'éditeur visuel intègre une bibliothèque de thèmes et de modèles personnalisables, garantissant une mise en page cohérente avec la charte graphique du site. Toutes les mises en page créées sont nativement adaptées aux formats mobiles et tablettes, sans configuration supplémentaire.

Contenu intelligent et assistants IA pour la mise en page

Le Content Hub intègre une fonctionnalité de contenu intelligent (Smart Content) qui adapte dynamiquement les blocs affichés en fonction du comportement du visiteur, de son profil dans le CRM ou de sa source de trafic. Cette personnalisation opère directement au niveau de la mise en page, sans intervention technique.

Des assistants basés sur l'IA — générateur de sites web, assistant de pages et création d'images — permettent de construire rapidement l'architecture visuelle d'un site et d'en produire les éléments graphiques, réduisant les allers-retours entre les équipes marketing et les développeurs.

Tarifs et positionnement face à WordPress et Marketo

Le Content Hub de HubSpot est disponible en trois formules. La version Starter est accessible à partir de 9 € par mois et inclut l'éditeur par glisser-déposer, les thèmes de site web et la création jusqu'à 50 pages. La version Professional, à partir de 441 € par mois, débloque les tests A/B de mise en page, le contenu intelligent et les recommandations SEO, pour jusqu'à 10 000 pages. La version Enterprise, à partir de 1 470 € par mois, s'adresse aux architectures web complexes avec gestion multi-domaines et développement d'applications web. Les tarifs en euros sont consultables sur hubspot.fr/pricing.

Par rapport à WordPress, l'obtention d'un éditeur glisser-déposer avancé ou de tests A/B de mise en page nécessiterait généralement l'installation de plugins tiers — ce qui pourrait alourdir les performances du site et complexifier la maintenance pour les équipes non techniques. HubSpot intègre nativement ces fonctionnalités, permettant aux profils marketing de gérer la mise en page de manière autonome tout en laissant aux développeurs un accès complet au code si nécessaire.

Par rapport à Marketo, dont l'interface pourrait sembler plus limitée en matière de création web, HubSpot propose un constructeur de site complet — blogs, menus avancés, arborescences — là où la concurrence se concentrerait davantage sur la création de pages de destination isolées.

Pour aller plus loin, téléchargez le guide d'optimisation de site web de HubSpot ou découvrez le logiciel CMS de HubSpot.