如何将相对定位图片居中于绝对定位背景图（React场景）

修改后的代码实现 #

React 组件代码

import './information.css'
import Background from '../../assets/character_informations_bg.png'

export default function Information(props) {
  return (
    <div className="character-information">
        <div className="image-container">
            <img src={Background} alt="背景图" className='character-information-bg' />
            <img src={props.image} alt="角色服装" className='character-information-clothes' />
        </div>
        <p>{props.name}<br />{props.price}</p>
    </div>
  )
}

CSS 代码（information.css）

/* 核心：给图片容器设置相对定位，作为内部元素的定位参考 */
.image-container {
  position: relative;
  display: inline-block; /* 让容器尺寸自适应背景图大小 */
}

/* 背景图铺满容器 */
.character-information-bg {
  display: block;
  width: 100%;
  height: auto;
}

/* 子图绝对定位+transform实现居中 */
.character-information-clothes {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90px;
  max-height: 90px;
}

问题原因说明 #

你之前的方案无效，核心问题有两个：

1. 包裹两张图片的父容器没有设置 position: relative，导致绝对定位的背景图是相对于页面body（或其他上级相对定位元素）定位，而非父容器，子图的相对定位无法和背景图对齐。
2. 相对定位元素是基于自身在文档流中的位置偏移，不是相对于绝对定位的背景图，因此margin: auto和transform无法直接实现你要的居中效果。

另一种可选方案（Flex布局） #

如果更倾向用Flex实现居中，CSS可以改成这样：

.image-container {
  position: relative;
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
}

.character-information-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持背景图比例并铺满容器 */
}

.character-information-clothes {
  position: relative;
  z-index: 1; /* 确保子图显示在背景图上方 */
  max-width: 90px;
  max-height: 90px;
}

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