Centering a position absolute img with a position relative img-CodePudding

Hi!

I have 2 images, one with position absolute (the background) and one with position relative, I want to center the position relative one to the position absolute one. I tried a lot of methods, with margin auto, transform, and others but nothing works for me.

Here's my code (I'm using React.js):

import './information.css'

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

export default function Information(props) {
  return (
    <div className="character-information">
        <div>
            <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)
.character-information-bg {
    position: absolute;
}
.character-information-clothes {
    position: relative;
    max-width: 90px;
    max-height: 90px;
}

CodePudding user response：

use left and top properties on .character-information-clothes

example -

.character-information-clothes {
  position: relative;
  left: 20%;
  top: 20rem;
  max-width: 90px;
  max-height: 90px;
}

adjust top and left according to yours background possitioning