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

你现有代码无法实现预期效果的核心原因：对图片设置绝对定位后，仅配置了左右偏移为0、底部偏移为0，缺少水平居中的必要规则，且父容器未设置有效高度，容易出现定位溢出。

方案1：兼容原有绝对定位逻辑 #

无需调整HTML结构，仅补充CSS规则即可：

.titulo {
  position: relative;
  /* 必须给父容器设置足够高度，可根据设计稿调整数值 */
  min-height: 600px;
}
.titulo img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* 水平自动边距实现居中 */
  margin: 0 auto;
  /* 建议设置图片最大宽度，避免尺寸溢出容器 */
  max-width: 320px;
}

注意：如果你使用的是Bootstrap框架，需要给.titulo内部的.container、.row、.col-12层级都添加height: 100%样式，避免嵌套容器高度塌陷，导致图片定位位置不符合预期。

方案2：Flex布局实现（更易维护） #

不需要依赖绝对定位，现代浏览器全兼容，代码逻辑更简洁：

.titulo {
  display: flex;
  /* 垂直方向靠底部对齐 */
  align-items: flex-end;
  /* 水平方向居中 */
  justify-content: center;
  min-height: 600px;
}
.titulo img {
  max-width: 320px;
}

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