Issue centering 2 overlaying images (transparent png)-CodePudding

This is my first post and I'm excited to be here with you all.

I'm having an issue centering 2 overlaying png images..

This is what I currently have:

Now that I have the 2 images located and overlayed how I want them to, how do I center both as if it were one image?

this is my html code:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>

Title Test

<body >

<img src="images/goku1.png" alt="goku" >

<img src="images/dbzlogo.png" alt="dbz" >

</body>

</html>

I've tried different codes and methods and while some do work, they only center one of the images.

example

What am I doing wrong? thanks so much!

CodePudding user response：

    html,body {
      width: 100%;
      height: 100%
    }
    
    .container {
      width: 100%;
      display: flex; 
      align-items: center;
    } 
    
    .dbzlogo {
      width: 70%;
      margin-bottom: 2%;
    }
    
    .goku {
       width: 35%;
       margin-right: -10%;
    }

    .vegeta {
       width: 35%;
       margin-left: -10%;
       z-index: -1;
    }

    <!DOCTYPE html>
    <html lang="en" dir="ltr">


    <body >
    <div >
      <img src="https://i.ibb.co/09MYrjj/goku1.png" alt="goku" >
      <img src="https://i.ibb.co/cYfLgWx/dbzlogo.png" alt="dbz" >
      <img src="https://i.ibb.co/D90PB7G/vegeta1.png" alt="vegeta" >
    </div>
    </body>

    </html>

CodePudding user response：

Please try this.

.body {
  position: relative;
}

.goku {
  position: absolute;
  top: calc(50% - xxxpx/2);
}
.dbzlogo {
  position: absolute;
  left: calc(50% - yyypx/2);
}

xxxpx is pixel of .goku image's height, and yyypx is pixel of .dbzlogo image's width.