JSFiddle - React, Tailwind, and code Playground

by João Vitor Scheuermann

HTML

<div class="center" id="teste"></div>
<div class="center" id="teste2"></div>

<div class="center" id="teste2">
  <div class="center_x center_y" id="teste3"></div>
</div>

<div class="center" id="teste">
  <div class="center_x center_y" id="teste3"></div>
</div>

CSS

#teste {
  position : relative;
  background-color: black;
  width: 200px;
  height: 50px; 
}

#teste2 { 
  position : relative;
  background-color: black;
  width: 300px;
  height: 50px;
  padding: 10px;   
  }

#teste3 {
  position:absolute;  
  background-color: red;
  width: 100px;
  height: 20px;   
}

JavaScript

console.log($(window).height());
console.log($(window).width());



(function() {
  var height = 0;
  var width = 0;  
 
  console.log($(".bolaxa").eq(0).parent().width())
  

  setInterval(function() {
    if ($(window).height() !== height || $(window).width() !== width) {
      height = $(window).height();
      width = $(window).width();				
			centerDivY();
      center_X();
      center_Y();
    }
  }, 10);
  
  
  function centerDivY () {
  var i;
  var posY;
	for (i = 0; $(".center").eq(i).length !== 0; i++) { 	
    posY = ($(window).width()/2) - ($(".center").eq(i).width()/2);  
    $(".center").eq(i).css("left", posY);
	};};
  
  function center_X(){  	
  	var i,posX;
		for (i = 0; $(".center_x").eq(i).length !== 0; i++) { 	
    posX = ($(".center_x").eq(i).parent().height()/2) - ($(".center_x").eq(i).height()/2);  
    $(".center_x").eq(i).css("top", posX);
	};}
  
  function center_Y(){
  	var i,posY;
		for (i = 0; $(".center_y").eq(i).length !== 0; i++) { 	
    posY = ($(".center_y").eq(i).parent().width()/2) - ($(".center_y").eq(i).width()/2);  
    $(".center_y").eq(i).css("left", posY);
	};}
  
}())