Как рассчитать верхнюю и левую позиции центрированного div?

Question

Вопрос немного сложнее, чем заголовок, я пытаюсь получить верхнее и левое значения центрированного div, использующего эти атрибуты css:

top:50%;
left:50%;
transform:translate(-50%, -50%);

Я могу получитьзначения top и left без каких-либо проблем, но я не понимаю, как translate(-50%, -50%) ведет себя на форуме ниже.

попробуйте Fiddle для проверки: https://jsfiddle.net/nqym3s4b/

...
<div id="div1">
    <div id="div2">...</div>
</div>

---

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

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

// top & left
var lw = (w / 100) * 50,
    lh = (h / 100) * 50;

// top & left with transform(-50%, -50%)
var tw = (lw / 100) * 50,
    th = (lh / 100) * 50;

left = 'left: ' + tw + 'px;';
top = 'top: ' + th + 'px;';

Есть идеи?

Answer 1

translate будет учитывать width / height внутреннего элемента , поэтому 50% - это половина ширины / высоты переведенного элемента в отличие от top / left, который будетрассмотрим размерность элемента parent .

Вычисление представляет собой простое сложение обоих значений (я добавил третий делитель над #div2, чтобы вы могли видеть результат)

var div1 = document.querySelector('#div1'); //parent element
var div2 = document.querySelector('#div2'); //translated element

var w1 = div1.offsetWidth,
    h1 = div1.offsetHeight;

var w2 = div2.offsetWidth,
    h2 = div2.offsetHeight;


var lw = (w1 / 100) * 50 + (-w2 / 100) * 50,
    lh = (h1 / 100) * 50 + (-h2 / 100) * 50;


document.querySelector('#left').innerHTML = 'left: ' + lw + 'px;';
document.querySelector('#top').innerHTML = 'top: ' + lh + 'px;';

document.querySelector('#div3').style.left = lw + 'px';
document.querySelector('#div3').style.top = lh + 'px';

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

#div1 #div2 {
  width: 340px;
  height: 120px;
  background: yellow;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#div1 #div3 {
  width: 50px;
  height: 50px;
  background: blue;
  position: absolute;
  opacity: 0.2;
}

<div id="div1">
  <div id="div2">
    <span id="left"></span>
    <br>
    <span id="top"></span>
  </div>
  <div id="div3">
    <!-- to compare -->
  </div>
</div>

Answer 2

Я сделал эту фотографию из MDN web docs .Он показывает, как работает свойство CSS translate.По сути, HTML работает следующим образом: начало координат остается в верхнем левом углу элемента, x оси справа и y оси уменьшаются

Свойство принимает двумерный вектор в качестве параметра (x и y) и перемещает весь элемент в направлении, определяемом вектором.