javascript-垂直和水平居中div（位置：絕對）到屏幕視圖

Question

我正在嘗試制作一個在圖像上覆蓋文本框的用戶腳本：它使用可拖動菜單，該菜單使用具有固定位置的interactjs。 菜單上有一個按鈕，我需要它來創建20px * 60px的div並將其顯示在屏幕視圖的中心（以免滾動到頁面底部並從那里拖動它）。 我可以使用以下方式（某種程度上）：

var div = document.getElementById("inserted_div_2");
div.style.position = 'fixed';
div.style.top = '50%'; //relative to screen
div.style.left = '50%';

從那里，我可以將其拖動/調整大小到圖像上想要的位置（也可以使用interactjs），但是然后，如何將其更改為position：absolute，以便它與內容一起滾動，在圖像上保持相同的位置（例如： img2的左上角）？ 就像是：

var posX = div.getPosX(); //relative to page; in %, px or em
var posY = div.getPosY();
// when I change it from fixed to absolute the div goes back to the bottom of the page
div.style.position = 'absolute';
div.style.left = posX;
div.style.top = posY;

HTML結構如下所示：

<body>
    ...
    <div id="content">
        ...
        <img src="/img1.jpg"> // size and number of imgs is variable.
        <img src="/img2.jpg"> // are in a strip format.
        <img src="/img3.jpg">
        ...
    </div>
    ...
    <div id="overlays">

         //eg: div1 was dragged from the center of screen 
         //into in between img1 and img2
         <div id="inserted_div_1">Text</div>

         //now I need to do the same for div2, 
         //dragging it to the top left corner of img2
         <div id="inserted_div_2">Text</div>

    </div>
</body>

我寧願不使用jQuery或其他庫，但是如果太難了，我將使用它。 謝謝！

Answer 1

您可以使用offsetTop和offsetLeft獲取元素相對於頁面的位置（以px為單位）。

var posX = div.offsetLeft;
var posY = div.offsetTop;
div.style.position = 'absolute';
div.style.left = posX;
div.style.top = posY;

UPDATE

offsetTop和offsetLeft返回的值不包含transform:translate樣式。 我創建了一個測試用例 -它不可拖動，但向您展示了如何通過添加offset和translate值來計算相對位置：

var div = document.getElementById("inserted_div_2");
var content = document.getElementById("content");

function testpos(){
    var ol = div.offsetLeft,
        ot = div.offsetTop,
        cs = window.getComputedStyle(div, null),
        tr = cs.getPropertyValue("-webkit-transform") ||
             cs.getPropertyValue("-moz-transform") ||
             cs.getPropertyValue("-ms-transform") ||
             cs.getPropertyValue("-o-transform") ||
             cs.getPropertyValue("transform") ||
             false;
        //outputs something like 'matrix(1, 0, 0, 1, 80, 90)'
        var values = tr.replace(/[^0-9\.\,]/g,'').split(','),//split into array
            tx = values[4] || 0,//take the x value (else 0)
            ty = values[5] || 0;//take the y value (else 0)       
    //
    content.innerHTML+=("<hr />position: "+div.style.position+"<br />");
    content.innerHTML+=("offsetLeft:"+ol+", offsetTop:"+ot+"<br />");
    content.innerHTML+=("translate-x:"+tx+", translate-y:"+ty+"<br />");
    //so the actual position is the offset + the translate ==
    var x = parseInt(ol) + parseInt(tx),
        y = parseInt(ot) + parseInt(ty);
    content.innerHTML+=("x:"+x+" y:"+y+"<br />");
}

/* TEST */
//1 set to fixed
div.style.position = 'fixed';
testpos();//test position
//2 move using transfor:translate
div.style.transform = 'translate(80px,90px)';
testpos();//test position (note the offset does not include the transform)
/3 set to absolute and get the position
div.style.position = 'absolute';
testpos();

http://jsfiddle.net/u3ay74bs/

Answer 2

您可以使用CSS垂直和水平居中div

例如

#content{
     position:absolute;
     width:100px;
     height:100px;
     left:50%;
     top:50%;
     margin-left:-50px; /*half width*/
     margin-top:-50px; /*half height*/
}

<div id='content'>
     ...
</div>

如果width等於100px左邊距等於-50px如果width等於200px左邊距等於-100px等

邊距左半邊寬度和邊距上半邊高度

javascript-垂直和水平居中div（位置：絕對）到屏幕視圖

問題描述

2 個解決方案

解決方案1
1 已采納 2014-09-06 08:46:50

解決方案2
0 2014-09-06 07:49:24

javascript-垂直和水平居中div（位置：絕對）到屏幕視圖

問題描述

2 個解決方案

解決方案1 1 已采納 2014-09-06 08:46:50

解決方案2 0 2014-09-06 07:49:24

解決方案1
1 已采納 2014-09-06 08:46:50

解決方案2
0 2014-09-06 07:49:24