Centering image inside DIV not giving expected position

Question

I have successfully centered my image using JavaScript and css. The issue I am having is that the coordinates for the centered image are not what I expected. Instead of the Top and Left values being relative to the top and left of the containing div, they represent the exact center of the image. Here is the fiddle and I will paste in my code. I need to know the exact top and left of the frame so I can calculate an offset on the server side.

Html:

<div id="containment-wrapper">
    <img id="imgFrame" class="centerImg" src="http://i.imgur.com/2KKIB.png" name=
    "imgFrame">

    <div id="drag_resize" style=
    "position: absolute; z-index: 1; width:500px; height: 375px;"><img id="#imgSource"
    src="http://data.whicdn.com/images/35067333/ocean-life-029_large.jpg" style=
    "width: 100%; height:100%;" name="#imgSource"></div>
  </div>

  <div style="height: 200px;"></div>Frame Position:

  <form>
    <input type="text" id="framePos"><br>
    Image Size: <input type="text" id="imgSize" style="width: 500px;"><br>
    Orgignal Image Position: <input type="text" id="imgPos" style="width: 500px;"><br>
    Calcualted Image Position: <input type="text" id="imgPosCalc" style=
    "width: 500px;"><br>
  </form>

CSS:

#containment-wrapper {
  border:1px solid; width: 432px;
  height: 348px; position: relative;
  border: solid 1px;display: table;
  text-align: center;
}

.centerImg {
    display:block;
    margin:auto;
    max-width:100%;
    top:50%;
    left:50%;
    opacity:0;
    position: absolute; z-index: 9999; pointer-events:none;  
}​

JavaScript:

$(function () {
    var frameTop = 0;
    var frameLeft = 0;

    $('#imgFrame').each(function () {
        imgheight = Math.round($(this).height() / 2);
        imgwidth = Math.round($(this).width() / 2);
        $(this).attr("style", "margin-top: -" + imgheight + "px; margin-left: -" + imgwidth + "px; opacity:1;");
    });

    var pos = $('#imgFrame').position();
    $('#framePos').val("Top: " + pos.top + " Left: " + pos.left);
    frameTop = pos.top;
    frameLeft = pos.left;

    $("#drag_resize").resizable({
        aspectRatio: true,
        resize: function (event, ui) {
            $('#imgSize').val("W: " + ui.size.width + " H: " + ui.size.height);
        },
        handles: 'e,w,n,s'


    }).draggable({
        drag: function (event, ui) {
            $('#imgPos').val("Top: " + (ui.position.top) + " Left: " + (ui.position.left));
            $('#imgPosCalc').val("Top: " + (ui.position.top - frameTop) + " Left: " + (ui.position.left - frameLeft));

        }
    });

    $('#imgSource').css({
        'width': '200px',
        'height': '200px;'
    })
});​

Answer 1

I added a function to calculate the true top and true left position of the frame:

function getTrueXY(){
        var img = document.getElementById('imgFrame'); 
        //or however you get a handle to the IMG
        var fameWidth= img.clientWidth;
        var frameHeight= img.clientHeight;

        var container = document.getElementById('containment-wrapper');
        var conWidth= container .clientWidth;
        var conHeight = container .clientHeight;

        var trueLeft = Math.round((conWidth / 2) - (fameWidth / 2));
        var trueTop = Math.round((conHeight / 2) - (frameHeight / 2));



    }

I updated the fiddle as well.