咱们先把这个居中方案的底层逻辑拆明白，再分析你那段代码的计算思路：

1. CSS居中的两步走逻辑 #

这个居中方法分两个关键步骤，每一步的百分比参考对象完全不一样：

• 第一步：top:50%; left:50%
  这里的百分比是相对于父元素的宽高计算的。它的作用是把当前div的左上角顶点定位到父元素的中心位置。这时候div其实是偏右下的，因为元素本身有宽高，所以看起来并没有真正居中。
• 第二步：transform: translate(-50%, -50%)
  这里的百分比是相对于元素自身的宽高计算的！translate(-50%, -50%)就是让元素向左移动自身宽度的50%，向上移动自身高度的50%。这样一来，整个元素的中心点就会和父元素的中心点重合，实现完美居中。

2. 分析你提供的JS代码逻辑 #

你那段代码的核心是想计算transform偏移后元素实际的top和left像素值，但里面的计算逻辑存在误区，咱们拆解一下：

• 首先获取元素自身宽高：var w = div.offsetWidth, h = div.offsetHeight; 这一步是正确的。
• lw = (w / 100) * 50、lh = (h / 100) * 50：这其实是元素自身宽高的50%，对应translate(-50%, -50%)里的偏移量（因为translate的50%是基于自身宽高的一半）。
• 但你写的tw = (lw / 100) * 50、th = (lh / 100) * 50这部分是错误的——这相当于把自身宽高的50%再取50%，完全不符合translate的实际偏移逻辑。

3. 正确的坐标计算方式 #

如果要获取应用transform后元素左上角的实际坐标（相对于父元素），正确的计算应该是这样：

var div = document.querySelector('#div2');
var parent = div.parentElement;
// 获取父元素的宽高
var parentW = parent.offsetWidth;
var parentH = parent.offsetHeight;
// 获取元素自身宽高
var w = div.offsetWidth;
var h = div.offsetHeight;

// 未应用transform时，元素左上角的坐标（对应top:50%; left:50%的像素值）
var originalLeft = parentW * 0.5;
var originalTop = parentH * 0.5;

// translate(-50%,-50%)带来的偏移量（向左向上移动自身宽高的一半）
var offsetLeft = -w * 0.5;
var offsetTop = -h * 0.5;

// 最终的左上角坐标
var finalLeft = originalLeft + offsetLeft;
var finalTop = originalTop + offsetTop;

console.log('最终left值：', finalLeft + 'px');
console.log('最终top值：', finalTop + 'px');

简单来说，translate(-50%, -50%)的作用就是用元素自身的一半宽高，去抵消top:50%; left:50%带来的偏移，让元素真正居中。

内容的提问来源于stack exchange，提问作者Horai Nuri