JSFiddle - React, Tailwind, and code Playground

by Milan Karagunović

HTML

<div id="homeGallery">
    <img src="image.png" class="imgClass" alt="X Y Centered Image"/>
</div>

CSS

#homeGallery {
  width: 600px;
  height: 400px;
  margin: 0 auto;
  border: 1px dotted gray;
}
#homeGallery .imgClass {
  position: relative;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
}

/* CSS to use with jQuery

#homeGallery .imgClass {
  position: relative;
  width: 200px; // For demo purposes 
  height: 200px; // For demo purposes
  top: 50%;
  left: 50%;
}
*/

JavaScript

// If you dont know the image width & height than you could use jQuery solution
$(function() {
    
    var imgW = $('.imgClass').outerWidth(),
        imgH = $('.imgClass').outerHeight();
    
    $('.imgClass').css({ marginLeft: - imgW / 2 + 'px', marginTop: - imgH / 2 + 'px' });
    
});