如何计算居中div的顶部和左侧位置？

Question

这个问题比标题要复杂一些，我试图获取使用这些css属性的居中div的顶部和左侧的值：

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

我能够毫无问题地获得顶部和左侧的值，但是我不明白下面的forumla的translate(-50%, -50%)表现如何。

尝试小提琴进行测试： 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将考虑父元素的尺寸。

计算是两个值的简单相加（我在#div2添加了第三个div，因此您可以看到结果）

 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网络文档中拍摄了这张照片。 它显示了CSS translation属性如何工作。 基本上，HTML的工作方式如下：原点保留在元素的左上角， x轴向右， y轴向下

该属性将二维矢量作为参数（ x和y ），并沿该矢量定义的方向移动整个元素。