Centering 3 different images on top of each other - html

Question

I have 3 images, all images are different widths and in the CSS I'm gonna be controlling the width with a %. Trying to position these images on top of each other + having them centered is proving to be tricky.
Normally to center the images I would just use Transform:translate(-50%, -50%) and set up my width percentage to like 60% and set my left and right 20% all in CSS, but because I'm using a parallax plugin that uses Transform: It cancels out my Transform:translate within the CSS (Chrome inspector shows it with a line through it). I think.
I need a way to center the images, while still let me width % and I can't think of a reliable method.
Fiddle: https://jsfiddle.net/bcabm0ru/3/
ul {
padding-left: 0px;
list-style: none;
}
li {}
.bubbles-one {
position: absolute;
z-index: 2;
}
.image-holder {}
.splash {
z-index: 4;
position: absolute;
margin-top: -15%;
}
.spotlight {
z-index: 3;
position: absolute;
}
.man {
z-index: 1;
position: absolute;
}
<section class="falling-person">
<div class="bubbles-one"><img src="./assets/images/bubble_01edit.png" alt="" class="img-fluid"></div>
<div class="container">
<dov class="row">
<div class="col-12">
<div class="image-holder">
<ul class="falling-scene">
<li class="layer" id="bubble_splash-layer"><img src="http://www.sharksharkshark.net/testing/assets/images/bubble_splash.png" alt="" class="mx-auto d-block img-fluid splash rellax"></li>
<li class="layer" id="spotlight-layer"><img src="http://www.sharksharkshark.net/testing/assets/images/spotlight.png" alt="" class="mx-auto d-block img-fluid spotlight rellax"></li>
<li class="layer" id="man-layer"> <img src="http://www.sharksharkshark.net/testing/assets/images/man.png" alt="" class="img-fluid man rellax"></li>
</ul>
</div>
</div>
</dov>
</div>

Answer 1

You can tell me if you don't want the HTML to be different, but I found this way more clean and easier to handle. What do you think? JSFiddle
HTML
<section class="falling-person">
<div class="image-wrapper">
<div class="layer" id="bubble_splash-layer">
<img class="splash" src="http://www.sharksharkshark.net/testing/assets/images/bubble_splash.png" alt="splash" />
</div>
<div class="layer" id="spotlight-layer">
<img class="spotlight" src="http://www.sharksharkshark.net/testing/assets/images/spotlight.png" alt="spotlight" />
</div>
<div class="layer" id="man-layer">
<img class="man" src="http://www.sharksharkshark.net/testing/assets/images/man.png" alt="man" />
</div>
</div>
</section>
CSS
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.image-wrapper {
width: 100%;
}
img {
width: 200px;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
.splash {
position: absolute;
margin-top: -15%;
z-index: 4;
}
.spotlight {
position: absolute;
z-index: 3;
}
.man {
position: absolute;
z-index: 1
}

Answer 2

Looks like you are using bootstrap 4. You should be able to just change your li tags to:
<li class="layer d-flex justify-content-center" id="bubble_splash-layer">
<img src="http://www.sharksharkshark.net/testing/assets/images/bubble_splash.png" alt="" class="mx-auto d-block img-fluid splash rellax">
</li>
<li class="layer d-flex justify-content-center" id="spotlight-layer"><img src="http://www.sharksharkshark.net/testing/assets/images/spotlight.png" alt="" class="mx-auto d-block img-fluid spotlight rellax">
</li>
<li class="layer d-flex justify-content-center" id="man-layer">
<img src="http://www.sharksharkshark.net/testing/assets/images/man.png" alt="" class="img-fluid man rellax">
</li>