本文介绍一种现代、健壮的方案：利用 CSS Grid 居中容器，配合 语义化结构与 position: absolute 将标题精确锚定在自适应图片底部，完美适配横/竖构图及各种视口尺寸。
本文介绍一种现代、健壮的方案：利用 css grid 居中容器，配合 `
在响应式图像布局中，既要确保图片在容器内水平垂直居中、充分利用空间（无论横屏还是竖屏），又要让标题（caption）始终紧贴图片底部——这看似简单，却常因定位方式冲突而失败。传统方案如 position: absolute + transform 虽能居中图片，但会使后续元素脱离文档流，导致标题无法自然关联；而纯 Flexbox 或 margin: auto 在复杂比例下也易出现偏移或溢出。
推荐采用 语义化 HTML + CSS Grid + 相对/绝对定位组合 的现代解法：
✅ 首先，用 display: grid 和 place-content: center 实现容器级居中，简洁可靠；
✅ 其次，将图片与标题包裹在 <figure></figure> 中，既符合语义规范，又为定位提供清晰的相对上下文；
✅ 最后，对 <figcaption></figcaption> 应用 position: absolute，并设置 bottom: 0; width: 100%，使其严格吸附于父 <figure></figure> 的底边——而 <figure></figure> 本身通过 max-height: 90vh 和 object-fit: contain 确保图片始终完整可见、等比缩放。
以下是完整可运行代码：
* {
box-sizing: border-box;
}
body {
margin: 0;
}
#container {
display: grid;
place-content: center;
min-height: 100vh; /* 全屏居中，避免滚动条干扰 */
border: 1px solid black;
}
figure {
margin: 0;
border: 2px solid red;
max-height: 90vh; /* 限制最大高度，留出标题空间 */
position: relative; /* 为 figcaption 提供绝对定位参考 */
}
img {
width: 100%;
height: 100%;
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.9rem;
border-top: 2px solid red; /* 可选视觉分隔 */
}<div id="container">
<figure>
<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"
alt="Portrait of Yi Haeung">
<figcaption>My caption — always pinned to the image bottom</figcaption>
</figure>
</div>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免给
<img alt="如何使用 CSS Grid 和绝对定位精准实现居中图片及其底部标题" >设置固定width/height，否则会破坏object-fit: contain的响应行为； -
figure必须设position: relative，否则figcaption的absolute定位将回溯到，导致错位； - 若需支持旧版浏览器（如 IE），可降级为 Flexbox +
transform方案，但需额外 JS 计算图片尺寸以动态定位标题； - 标题背景建议使用半透明遮罩（如
rgba(0,0,0,0.6)），提升文字在任意图片上的可读性。
该方案兼顾语义、可维护性与跨设备鲁棒性，是现代 Web 图文布局的推荐实践。
