HTML中figure居中对齐 HTML中figure标签margin默认值修改-html教程-PHP中文网

figure默认不居中，它只是语义化的块级元素，宽度默认撑满父容器且margin为0，无内置居中行为；居中需通过width+margin:auto、flex布局或text-align配合inline-block等css方式实现。

html中figure居中对齐 html中figure标签margin默认值修改

figure默认居中吗？不是，它只是块级元素

HTML 的 <figure></figure> 标签本身没有默认居中行为，它只是个语义化的块级元素，表现和 <div> 类似：宽度默认撑满父容器，上下 margin 为 0，左右 margin 为 auto 也不会自动生效——因为没设置 <code>width，margin: auto 对它无效。

所以“figure 居中”一定是你或 CSS 框架（比如 Bootstrap）额外加了样式。别误以为是浏览器默认行为。

让figure水平居中的三种可靠方式

核心思路：让 <figure></figure> 变成「有明确宽度 + 左右 margin auto」的块，或用更现代的布局控制。

方法一（最通用）： 给 <figure></figure> 设置固定/内联宽度 + margin: 0 auto
```
figure {
  width: fit-content; /* 或具体值如 400px */
  margin: 0 auto;
}
```

方法二（推荐）： 父容器用 Flex 布局

figure {
  margin: 0; /* 先清掉可能的默认或继承 margin */
}
figure-container {
  display: flex;
  justify-content: center;
}

方法三（适合图文组合）： 用 text-align: center 配合 display: inline-block

figure {
  display: inline-block;
  margin: 0;
}
figure-container {
  text-align: center;
}

注意：fit-content 在旧版 Safari 中支持有限，生产环境若需兼容 IE 或老 Safari，优先选 inline-block 或 Flex 方案。

figure的margin默认值到底是多少？

所有主流浏览器对 <figure></figure> 的默认 margin 都是 0（Chrome、Firefox、Safari、Edge 均一致），**没有内置上下边距**。你看到的“有空隙”，大概率来自以下任一原因：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

父元素（比如 <main></main> 或 <article></article>）设置了 margin 或 padding
figure 内部的 <img>、<figcaption></figcaption> 自带默认 margin（例如 <figcaption></figcaption> 在某些 UA 样式里有 margin-top: 1em）
CSS 重置库（如 Normalize.css）或框架（如 Bulma）主动加了 margin
行内元素换行产生的空白符被渲染为间隙（常见于 display: inline-block 场景）