如何在position为absolute、高度为百分比的img元素内垂直居中div？

img 属于自闭合替换元素，内部无法嵌套其他DOM节点，你需要的「在图片可视区域内垂直居中div」可以通过给img和目标div套一层共同的相对定位父容器实现，适配百分比高度的图片场景，具体代码修改如下：

HTML 结构调整 #

给两个同级元素套父容器：

<div class="img-wrapper">
  <img class="star" src="star.png" alt="星星">
  <div class="vCenter">要在图片内垂直居中的文本</div>
</div>

CSS 样式调整 #

/* 父容器样式，高度和你原本给img设置的百分比保持一致 */
.img-wrapper {
  position: relative;
  height: 30%; /* 替换为你实际需要的百分比高度 */
}

.star {
  position: absolute; /* 保留你原有必填属性，不影响其他功能 */
  height: 100%;
  width: 100%;
  object-fit: contain; /* 可选，避免图片拉伸变形 */
}

.vCenter {
  position: absolute;
  /* 核心垂直居中逻辑，适配动态高度 */
  top: 50%;
  transform: translateY(-50%);
  /* 如果需要同时水平居中，可追加以下代码 */
  left: 0;
  right: 0;
  text-align: center;
}

方案说明 #

• top: 50% 是相对父容器高度的百分比，和图片的百分比高度适配
• transform: translateY(-50%) 是相对文本div自身高度的百分比偏移，不需要写死任何固定像素值，不管图片和文本高度怎么变都能保持垂直居中
• 如果父容器的百分比高度不生效，需要给父容器的所有上级节点（直到html、body）设置明确的height属性，比如 html, body { height: 100%; }

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