使用centerX和centerY属性将{div}定位在另一个div上

Question

我做了这个东西，我可以生成形状并将它们保存为JSON格式。我计算了centerX和centerY，现在我只想通过一个加载按钮将这些形状放回原来的位置。我应该为centerX和centerY准确设置什么属性来定位它们？

这就是我制作JSON的方式

document.getElementById('save-btn').addEventListener('click', function() {
    var theBoard = document.getElementById('myBoard');
    var boardChildren = theBoard.children;
    var data = {};

    for (var i = 0; i < boardChildren.length; i++) {
        var selectedChild = boardChildren[i];
        var selectedChildID = selectedChild.id;
        var selectedChildStyle = window.getComputedStyle(selectedChild);
        data[selectedChildID] = {};

        var $child = $('#' + selectedChildID);
        var centerX = $child.offset().left + ($child.width() / 2);
        var centerY = $child.offset().right + ($child.height() / 2);

        data[selectedChildID].className = selectedChild.className;
        data[selectedChildID].borderRadius = selectedChildStyle.getPropertyValue("border-radius");
        data[selectedChildID].backgroundColor = selectedChildStyle.getPropertyValue("background-color");
        data[selectedChildID].height = selectedChildStyle.getPropertyValue("height");
        data[selectedChildID].width = selectedChildStyle.getPropertyValue("width");
        data[selectedChildID].marginLeft = selectedChildStyle.getPropertyValue("margin-left");
        data[selectedChildID].marginTop = selectedChildStyle.getPropertyValue("margin-top");
        data[selectedChildID].float = selectedChildStyle.getPropertyValue("float");
        data[selectedChildID].zIndex = selectedChildStyle.getPropertyValue("z-index");
    }

    var jsonString = JSON.stringify(data, null, "\t");

    var file = new Blob([jsonString], {
        type: 'application/json'
    });

    var a = document.createElement('a');
    a.href = URL.createObjectURL(file);
    a.download = 'data.json';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);

}); 

由于