本文介绍一种现代、可靠的方法：利用 CSS Grid 居中容器，配合 语义化结构与绝对定位的 ，实现图像自适应居中且标题始终紧贴其底部，兼容横/竖构图及各种视口尺寸。
本文介绍一种现代、可靠的方法：利用 css grid 居中容器，配合 `
在响应式图像展示场景中，既要保证图像在容器内水平垂直居中、充分利用空间（无论宽高比），又要让标题（caption）精确锚定在图像底部边缘——这看似简单，却常因定位方式冲突而失败。传统 position: absolute + transform 的图像居中方案会使父容器脱离文档流，导致子元素（如 caption）难以相对图像定位；而纯 Flex 布局又可能因换行或对齐精度问题造成偏移。
推荐解法：语义化结构 + CSS Grid + 绝对定位组合
核心思路是：
- 使用
<figure></figure>包裹<img>和<figcaption></figcaption>，符合 HTML5 语义规范； - 将外层容器设为
display: grid并用place-content: center实现真正居中（等价于justify-content: center; align-items: center）； - 为
<figure></figure>设置position: relative，使其成为<figcaption></figcaption>的定位上下文； -
<figcaption></figcaption>使用position: absolute; bottom: 0; width: 100%，确保紧贴图像底边，且随图像缩放自动适配宽度。
以下是完整、生产就绪的代码示例：
* {
box-sizing: border-box;
}
body {
margin: 0;
}
#container {
display: grid;
place-content: center;
min-height: 100vh; /* 全屏居中，避免滚动条干扰 */
border: 1px solid #000;
}
figure {
margin: 0;
border: 2px solid #f00;
max-height: 90vh; /* 限制最大高度，防止溢出 */
position: relative; /* 关键：为 figcaption 提供定位基准 */
width: fit-content; /* 自适应图像原始宽高比 */
}
img {
display: block; /* 消除图片下方默认空白间隙 */
width: 100%;
height: auto;
max-width: 95vw;
max-height: 85vh;
object-fit: contain; /* 保持比例并完整显示，不裁剪 */
}
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.9em;
line-height: 1.4;
border-top: 2px solid #f00;
}
<div id="container">
<figure>
@@##@@
<figcaption>My caption — dynamically aligned to image bottom</figcaption></figure>
</div>
✅ 优势说明：
- ✅ 完全响应式：
object-fit: contain确保横/竖图均完整可见，max-*限制防溢出； - ✅ 精准定位：
figcaption绝对定位在figure内，不受外层 Grid 或视口变化影响； - ✅ 无 JS 依赖：纯 CSS 实现，性能优异，SEO 友好；
- ✅ 可扩展性强：支持添加过渡动画、悬停效果或暗色模式适配。
⚠️ 注意事项：
- 避免给
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Portrait_of_Yi_Haeung_%28National_Museum_of_Korea%29.jpg/403px-Portrait_of_Yi_Haeung_%28National_Museum_of_Korea%29.jpg?x-oss-process=image/resize,p_40" alt="Portrait of Yi Haeung">设置height: 100%同时又未约束<figure></figure>高度，否则可能导致拉伸失真；推荐优先用max-height+object-fit: contain； - 若需支持旧版浏览器（如 IE），
place-content需回退为justify-content+align-items，fit-content替换为inline-block+text-align: center容器； -
figcaption的background和color建议使用半透明遮罩+高对比文字，确保在任意图像背景下清晰可读。
此方案兼顾现代性、健壮性与可维护性，是图像画廊、作品集、CMS 图文模块的理想实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
