JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div0">
  <div id="div1">
    <div id="div2">
      <span id="left"></span>
      <br>
      <span id="top"></span>
    </div>
  </div>
</div>

CSS

#div0 {
  position:relative;
}

#div1 {
  position: absolute;
  width: 560px;
  height: 240px;
  background: red;
}

#div1 #div2 {
  width: 340px;
  height: 120px;
  background: yellow;
  position:absolute;
  /* REPLACE EVERYTHING BELOW WITH RESULTS TO COMPARE */
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);  
}

JavaScript

var div = document.querySelector('#div2');

var w = div.offsetWidth,
		h = div.offsetHeight;

var lw = (w / 100) * 50,
		lh = (h / 100) * 50;
    
var tw = (w / 100) * 50,
    th = (h / 100) * 50;
    
document.querySelector('#left').innerHTML = 'left: ' + tw + 'px;';
document.querySelector('#top').innerHTML = 'top: ' + th + 'px;';