How to transform images to div center?

Question

EDIT: The linked 'duplicate' does not resolve my problem; I am not transforming divs, I am transforming images aligned on the same row with input fields within a div.

EDIT 2: Solution found: use 'left: 0; right: 0' in div of interest.

---

https://jsfiddle.net/pskdtzL1/201/ (see in 'right results' setting)

I seek to slide images in and out of screen, all centered in own <div>. The above code achieves the sliding, but fails to center the incoming images for all zoom levels; absolute positioning w/ pixels only works for one zoom.

Note: in the full code, the 'images' are wrapped by <input> calling onclick, onmouseover, and onmouseout JScript functions. I set slide-in transforms to end at 0 to retain input field functionality.

How do I slide the images (and inputs) to the <div> center for all zoom levels? Help is appreciated.

HTML

<div class="row">
    <div class="left">
    Stuff
    </div>

    <div class="main">
    <!-- several <img> and a <button>-->
    </div>
</div>

CSS

* {box-sizing: border-box;}   
.row {display: flex; flex-wrap: wrap;} 
.left {flex: 20%;
       background-color: #f1f1f1;
       padding: 20px;}
.main {flex: 80%;
       background-color: white;
       padding: 20px;
       overflow: hidden;
       position: relative;}
.lleft {position:absolute; left: -300px;} 

/* Animation CSS (added to elements via JavaScript) */