[英]How to calculate top and left positions of a centered div?
這個問題比標題要復雜一些,我試圖獲取使用這些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;';
有任何想法嗎?
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>
我已經從MDN網絡文檔中拍攝了這張照片。 它顯示了CSS translation屬性如何工作。 基本上,HTML的工作方式如下:原點保留在元素的左上角, x
軸向右, y
軸向下
該屬性將二維矢量作為參數( x
和y
),並沿該矢量定義的方向移動整個元素。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.