JSFiddle - React, Tailwind, and code Playground

HTML

<!--page -->
<div id="gallery-container">
    <!-- main images -->
    <div class="cycle-slideshow">
        <img src="img.jpg" />
    </div>
    <!-- thumbnails -->
    <div class="thumbs">
        <img src="img.jpg" />
    </div>
</div>

CSS

#gallery-container {
    width:500px;
    z-index:70;
    margin:0 auto;
    position:relative;
    overflow:hidden;
    border: 1px solid red;
}
.cycle-slideshow {
    height:100px;
    margin:0 auto;
    padding:0;
    position:relative;
    width: 100%;
}
.thumbs {
    position:relative;
    margin:0 auto;
    padding:0;
}

JavaScript

jQuery.fn.center = function (centerToWindow) {
    var parent = null;
    var positionCss = null;
    if (centerToWindow) {
        parent = window;
        positionCss = "absolute";
    } else {
        parent = this.parent();
        positionCss = "relative";
    }
    this.css({
        "position": positionCss,
            "top": Math.max(0, (($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop()) + "px",
            "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
    });
    return this;
}

$(function () {
    $(window).resize(function () {
        $("#gallery-container").center(true);
    }).trigger("resize");
});