HTML 和 CSS 如何让图片居中

最快的方法：在父元素上写 text-align

<img> 是行内元素：它像一个字一样位于一行文字中。所以让它居中的方法和让文字居中一样，在父元素上写 text-align: center：

<!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>

样式写在 div 上，而不是图片上。把 text-align: center 写在 <img> 本身上没有任何效果，因为图片里面没有可以对齐的文字。

方法 2：display block 加 margin auto

如果你更想直接给图片本身写样式，就把它变成块元素，再给它自动的左右外边距。两边的剩余空间会被平均分配：

<!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>

灰色图片写了 margin: 0 auto，却仍然停在行首：自动外边距对行内元素不起作用。缺的那一步就是 display: block。max-width: 100% 加 height: auto 能让图片在窄屏上不溢出，同时保持原有比例。

方法 3：flexbox 或 grid，包括垂直居中

要让图片在盒子里两个方向都居中，就给盒子设置高度，再用 grid 或 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>

flexbox 的等效写法是 display: flex; justify-content: center; align-items: center;。无论哪种写法，盒子的高度都必须大于图片，否则没有可以居中的空间。同样的方法可以让任何元素居中，div 居中页面对比了所有方法。

让带标题的图片居中

带说明文字的照片应该放在 <figure> 里。让 figure 的内容居中，图片和说明文字就会一起对齐：

<!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>

一行多张图片居中

一行 logo 或缩略图适合交给 flexbox。justify-content: center 让这一组居中，gap 设置间距，flex-wrap 让它在小屏幕上换行，同时保持居中：

<!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>

该用哪种方法

旧方法，以及为什么不要用

在旧教程里你仍然会看到这些写法：

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

<center> 和 align 属性已经从 HTML 中移除。为了向后兼容，浏览器仍然会渲染 <center>，而图片上的 align="center" 甚至不能让它水平居中：浏览器把它当作行内的垂直对齐。请使用上面的 CSS 方法。

常见错误

• 把 text-align: center 写在 <img> 上。 应该写在父元素上。
• 在行内图片上用 margin: 0 auto。 加上 display: block。
• 父元素没有高度就想垂直居中。 盒子会收缩到图片大小，没有可以居中的空间。
• float: center。 根本没有这个值，浮动只能靠向一边。
• 忘记写 alt。 居中的图片同样需要替代文字，只有纯装饰性的图片才用 alt=""。
• 图片被拉伸。 在 CSS 中把 width 和 height 都设成比例不同的值会让图片变形。只设置其中一个并使用 height: auto，或者加上 object-fit: cover。