如何使用 CSS Grid 和绝对定位为居中图像添加底部图注-html教程-PHP中文网

如何使用 CSS Grid 和绝对定位为居中图像添加底部图注

本文介绍一种现代、可靠的方法：利用 CSS Grid 居中容器，配合语义化结构与绝对定位的，使图注始终紧贴图像底部，同时兼容横/竖构图图像并保持响应式。

本文介绍一种现代、可靠的方法：利用 css grid 居中容器，配合 `

` 语义化结构与绝对定位的 `

`，使图注始终紧贴图像底部，同时兼容横/竖构图图像并保持响应式。

要实现图像在容器中完美居中（无论宽高比），且图注精准附着于图像底部，关键在于分离布局逻辑与定位逻辑：用 display: grid + place-content: center 实现容器级居中；用 <figure></figure> 作为相对定位上下文；再将 <figcaption></figcaption> 设置为 position: absolute 并锚定在 bottom: 0。

以下是推荐的完整实现方案：

* {
  box-sizing: border-box;
}

body {
  margin: 0; /* 防止默认边距干扰全屏居中 */
}

#container {
  display: grid;
  place-content: center; /* 同时实现水平+垂直居中 */
  min-height: 100vh;     /* 确保容器占满视口高度 */
  border: 1px solid black;
}

figure {
  margin: 0;             /* 清除浏览器默认 margin */
  max-height: 90vh;      /* 限制最大高度，避免溢出 */
  position: relative;    /* 为 figcaption 提供定位上下文 */
  border: 2px solid red;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 确保图像完整可见，不拉伸、不裁剪 */
  display: block;        /* 避免底部空白（inline 元素基线间隙） */
}

figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 0.9rem;
  border: 2px solid red;
}

<div id="container">
  <figure>
    @@##@@
    <figcaption>My caption — responsive, image-anchored, and semantically correct</figcaption></figure>
</div>

✅ 优势说明：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

语义清晰：<figure></figure> + <figcaption></figcaption> 是 HTML5 推荐的图文组合标签，利于 SEO 与可访问性；
响应稳定：object-fit: contain 自动适配任意长宽比图像，max-height: 90vh 防止大图撑破视口；
定位精准：position: relative 在 figure 上启用后，figcaption 的 bottom: 0 始终相对于图像实际渲染区域底部，而非容器；
无 JS 依赖：纯 CSS 解决，性能高效，兼容现代浏览器（Chrome 66+、Firefox 63+、Safari 12.1+）。

⚠️ 注意事项：

若需支持旧版 IE，应降级为 Flexbox 方案（display: flex; flex-direction: column + margin: auto），但需额外处理 figcaption 的绝对定位兼容性；
图像必须设置 display: block，否则 img 默认为 inline 元素，会在底部产生约 4px 空隙，影响 figure 高度计算；
place-content: center 是 align-content: center 和 justify-content: center 的简写，仅在 Grid 容器中生效，不可用于 Flex。