JSFiddle - React, Tailwind, and code Playground

by TekVanDo

HTML

<div class="div1"><div class="div2"></div></div>

<div class="div1"><div class="div2"></div></div>

CSS

.div1{
  background:red;
  width:400px;
  height:400px;
}
.div2{
  background: #fc0;
  width:200px;
  height:200px;
}

JavaScript

(function($) {
$.fn.centred = function(){
return this.each(function() {
find_h = (jQuery(this).height())/2;
find_w = (jQuery(this).width())/2;
parent_h = (jQuery(this).parent().height())/2;
parent_w = (jQuery(this).parent().width())/2;
final_h = parent_h-find_h;
final_w = parent_w-find_w;
jQuery(this).css("position","relative").css("left",""+final_w+"px").css("top",""+final_h+"px");
});
}
})(jQuery);

$(".div2").centred();