如何将标题div定位在容器内居中图片的底部？

核心思路是把图片和标题绑定到同一个子容器，让这个子容器在大容器中垂直水平居中，同时让图片自适应占满子容器的可用空间，标题自然跟随在图片下方，完美适配横/竖版图片。

修改后的完整代码 #

HTML

<div id="container">
  <div class="inner-container">
    <img id="image" 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">
    <div id="caption">My caption</div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

#container {
  position: absolute;
  top: 2%;
  bottom: 2%;
  left: 2%;
  right: 2%;
  border: 1px solid black;
  /* 用flex实现内部子容器的水平垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner-container {
  /* 包裹图片和标题，用列布局让标题在图片下方 */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 限制子容器最大尺寸，和你原来的图片限制一致 */
  max-width: 95%;
  max-height: 90%;
}

#image {
  border: 2px solid red;
  /* 图片自适应子容器宽度，保持比例且不超出最大尺寸 */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

#caption {
  text-align: center;
  border: 2px solid red;
  /* 标题宽度和图片一致，添加间距 */
  width: 100%;
  margin-top: 8px;
}

关键细节说明 #

1. 大容器的flex布局：替代你原来的transform或absolute居中方案，直接让内部的.inner-container稳定居中，不会出现偏移问题。
2. 子容器绑定图片和标题：把两者放到同一个容器里，确保标题始终跟着图片走，不会出现错位。
3. 图片的自适应设置：object-fit: contain保证图片比例不变，同时最大化利用子容器的可用空间，横/竖版图片都能完美适配。
4. 标题的对齐处理：设置width:100%让标题和图片同宽，text-align:center保证文字居中，margin-top调整和图片的间距。

为什么你之前的方案有问题？ #

• 用position:absolute给图片居中：图片脱离文档流，标题无法和图片绑定，自然没法放在图片底部。
• 用transform偏移居中：图片是相对自身偏移，但标题仍在正常文档流，所以视口变化时标题位置失控。
• 直接用flex列布局在大容器：图片和标题会平分大容器空间，没法让图片最大化利用可用区域，导致标题错位。

内容的提问来源于stack exchange，提问作者Alexander Ites