Peut-on utiliser la balise ou align="center" pour centrer une image ?

Non. et l'attribut align sur sont obsolètes en HTML5. Les navigateurs affichent encore pour les anciennes pages, mais align="center" sur une image l'aligne verticalement dans la ligne, pas horizontalement. Utilisez le CSS.

Docs CSS exécutables : Centrer une image

Q: Comment centrer une image en HTML ?

Placez text-align: center sur l'élément qui la contient, par exemple . Une image est inline par défaut, elle se centre donc comme un mot du texte.

Q: Comment centrer une image avec margin auto ?

Transformez d'abord l'image en bloc : img { display: block; margin: 0 auto; }. Les marges automatiques ne centrent pas les éléments inline, et une image reste inline tant que vous ne la modifiez pas.

La réponse rapide : text-align sur le parent

Une <img> est un élément inline : elle se place dans une ligne de texte comme un mot. Vous la centrez donc comme du texte, avec text-align: center sur son parent :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center an image</title>
  <style>
    .wrap { text-align: center; border: 1px dashed #9ca3af; padding: 8px; }
  </style>
</head>
<body>
  <div class="wrap" id="wrap">
    <img id="img" width="160" height="100" alt="Blue rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%232563eb'/%3E%3C/svg%3E">
  </div>
</body>
</html>

Le style se place sur la div, pas sur l'image. Mettre text-align: center sur l'<img> elle-même ne fait rien, car l'image ne contient aucun texte à aligner.

Méthode 2 : display block et margin auto

Si vous préférez styliser l'image elle-même, transformez-la en bloc et donnez-lui des marges latérales automatiques. L'espace libre de chaque côté est partagé à parts égales :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and margin auto</title>
  <style>
    .centered {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      height: auto;
    }
    .frame { border: 1px dashed #9ca3af; padding: 8px 0; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div class="frame">
    <img class="centered" id="img" width="160" height="100" alt="Green rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%2316a34a'/%3E%3C/svg%3E">
  </div>
  <div class="frame">
    <img style="margin: 0 auto;" id="inline" width="160" height="100" alt="Gray rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%239ca3af'/%3E%3C/svg%3E">
  </div>
</body>
</html>

L'image grise a margin: 0 auto mais reste au début de la ligne : les marges automatiques ne font rien sur un élément inline. display: block est la pièce manquante. max-width: 100% avec height: auto empêche l'image de déborder d'un écran étroit tout en gardant ses proportions.

Méthode 3 : flexbox ou grid, centrage vertical compris

Pour centrer une image dans les deux directions à l'intérieur d'une boîte, donnez une hauteur à la boîte et centrez son contenu avec grid ou flexbox :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center vertically</title>
  <style>
    .box {
      display: grid;
      place-items: center;
      height: 220px;
      background: #f3f4f6;
      border: 1px solid #d1d5db;
    }
  </style>
</head>
<body>
  <div class="box" id="box">
    <img id="img" width="120" height="120" alt="Amber circle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='60' cy='60' r='60' fill='%23f59e0b'/%3E%3C/svg%3E">
  </div>
</body>
</html>

L'équivalent flexbox est display: flex; justify-content: center; align-items: center;. Dans les deux cas, la boîte doit être plus haute que l'image, sinon il n'y a pas d'espace où centrer. Les mêmes méthodes centrent n'importe quel élément ; la page pour centrer une div les compare toutes.

Centrer une image avec une légende

Une photo avec une légende a sa place dans un <figure>. Centrez le contenu de la figure, et l'image et la légende s'alignent ensemble :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Figure</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    figure {
      margin: 0;
      text-align: center;
    }
    figure img { max-width: 100%; height: auto; }
    figcaption { font-size: 14px; color: #4b5563; margin-top: 6px; }
  </style>
</head>
<body>
  <figure id="fig">
    <img id="img" width="200" height="120" alt="A mountain drawing"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120'%3E%3Crect width='200' height='120' fill='%23bfdbfe'/%3E%3Cpath d='M0 120L70 40L140 120Z' fill='%2316a34a'/%3E%3Cpath d='M80 120L150 55L200 100V120Z' fill='%2315803d'/%3E%3C/svg%3E">
    <figcaption id="cap">Figure 1. A centered image with its caption.</figcaption>
  </figure>
</body>
</html>

Plusieurs images sur une ligne centrée

Une rangée de logos ou de miniatures est un travail pour flexbox. justify-content: center centre le groupe, gap l'espace, et flex-wrap le laisse passer à la ligne sur les petits écrans tout en restant centré :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Centered row</title>
  <style>
    .row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border: 1px dashed #9ca3af;
    }
  </style>
</head>
<body>
  <div class="row" id="row">
    <img width="80" height="50" alt="Logo one" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%232563eb'/%3E%3C/svg%3E">
    <img width="80" height="50" alt="Logo two" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%2316a34a'/%3E%3C/svg%3E">
    <img width="80" height="50" alt="Logo three" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%23f59e0b'/%3E%3C/svg%3E">
  </div>
</body>
</html>

Quelle méthode utiliser

Situation	Utilisez
Une image dans un paragraphe ou un bloc simple	`text-align: center` sur le parent
Vous ne pouvez styliser que l'image	`display: block; margin: 0 auto;`
Centrer dans les deux directions dans une boîte	Grid `place-items: center` (ou flexbox) sur la boîte
Une rangée d'images	Flexbox avec `justify-content: center`
Une image avec une légende	`<figure>` avec `text-align: center`
Une image de fond, pas du contenu	`background-position: center`, voir image de fond

Les anciennes méthodes, et pourquoi les éviter

Vous les trouverez encore dans d'anciens tutoriels :

<!-- obsolete: do not use -->
<center><img src="logo.png" alt="Logo"></center>
<img src="logo.png" alt="Logo" align="center">

<center> et l'attribut align ont été retirés du HTML. Les navigateurs affichent encore <center> par compatibilité, et align="center" sur une image ne la centre même pas horizontalement : les navigateurs le traitent comme un alignement vertical dans la ligne. Utilisez l'une des méthodes CSS ci-dessus.

Erreurs courantes

text-align: center sur l'<img>. Placez-le sur le parent.
margin: 0 auto sur une image inline. Ajoutez display: block.
Un centrage vertical sans hauteur sur le parent. La boîte se réduit à l'image et il ne reste pas d'espace où centrer.
float: center. Cette valeur n'existe pas. Les flottants ne vont que sur un côté.
Oublier alt. Une image centrée a toujours besoin d'un texte alternatif ; n'utilisez alt="" que pour les images purement décoratives.
Une image étirée. Donner en CSS une width et une height dont le rapport diffère la déforme. Définissez l'une des deux avec height: auto, ou ajoutez object-fit: cover.

Questions fréquentes

Comment centrer une image en HTML ?

Placez text-align: center sur l'élément qui la contient, par exemple <p style="text-align: center;"><img src="logo.png" alt="Logo"></p>. Une image est inline par défaut, elle se centre donc comme un mot du texte.

Comment centrer une image avec margin auto ?

Transformez d'abord l'image en bloc : img { display: block; margin: 0 auto; }. Les marges automatiques ne centrent pas les éléments inline, et une image reste inline tant que vous ne la modifiez pas.

Comment centrer une image verticalement et horizontalement ?

Faites de son conteneur une grille (ou un flexbox) avec une hauteur : .box { display: grid; place-items: center; height: 300px; }. L'image se place alors au milieu de la boîte.

Peut-on utiliser la balise <center> ou align="center" pour centrer une image ?

Non. <center> et l'attribut align sur <img> sont obsolètes en HTML5. Les navigateurs affichent encore <center> pour les anciennes pages, mais align="center" sur une image l'aligne verticalement dans la ligne, pas horizontalement. Utilisez le CSS.

Pourquoi y a-t-il un petit espace sous mon image centrée ?

Une image inline repose sur la ligne de base du texte, ce qui laisse de la place en dessous pour les jambages des lettres. Définissez display: block sur l'image, ou vertical-align: middle, et l'espace disparaît.

Concepts liés