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="teste3"></div>
<div class="center" id="teste4"></div>
<div class="center" id="teste5"></div>
<div class="center" id="teste6"></div>
<div class="center" id="teste7"></div>

CSS

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

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

#teste3 {
  position : relative;
  background-color: black;
  width: 30px;
  height: 50px;
  margin: 5px;
  padding: 5px;
}

#teste4 {
  position : relative;
  background-color: black;
  width: 50px;
  height: 50px;
  margin: 5px;
  padding: 5px;
}



#teste5 {
  position : relative;
  background-color: black;
  width: 100px;
  height: 50px;
  margin: 5px;
  padding: 5px;
}

#teste6 {
  position : relative;
  background-color: black;
  width: 400px;
  height: 50px;
  margin: 5px;
  padding: 5px;
}

#teste7 {
  position : relative;
  background-color: black;
  width: 250px;
  height: 50px;
  margin: 5px;
  padding: 5px;
}

JavaScript

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



(function() {
  var height = $(window).height();
  var width = $(window).width();
  
  centerDivY();

  setInterval(function() {
    if ($(window).height() !== height || $(window).width() !== width) {
      height = $(window).height();
      width = $(window).width();				
			centerDivY();	
    }
  }, 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);
	};};
  
}())