trying to get an absolute positioned div to center within another relative positioned div

Question

I want a div to open up that will appear over top of the current div and won't shift the elements so I'm using absolute positioning, but I want it to be centered horizontally and vertically within that relative div wherever its at on the page and I can't seem to get it goin right.

UPDATE: Solved. I was rackin my head on this for hours. For whomever this may help in the future

http://jsfiddle.net/zjRga/60/

Short answer: jQuery- element.position()

Well since the downvoting has begun and no explanation why, I assume the question is lacking a direction. Is this something I can accomplish with just css, or will I need a calculation function for this — james, Dec 07 '11 at 19:26
It's best to post your own answer and accept it than edit your question with your solution. — LarsTech, Dec 07 '11 at 23:20

score 0 · Answer 1 · answered Dec 07 '11 at 19:45

Your question is a little unclear. Here is a stab at what you may want: http://jsfiddle.net/zjRga/59/. Note the changes to #editItemDialog. If this is not exactly what you are looking for, I think at least it will show you how to center an absolutely positioned div that has a width and height set on it.

score 0 · Accepted Answer · answered Dec 07 '11 at 19:45

You need to check the height and width of the element you're centering on and set the top and left accordingly.

$('.labelEdit').click( function() {
    var x = $("#editDialog").width() / 2 - $("#editItemDialog").outerWidth() / 2;
    var y = $("#editDialog").height() / 2 - $("#editItemDialog").outerHeight() / 2;
    $("#editItemDialog").css({"top": y, "left": x});
    $('#editItemDialog').show('slow');
});

Basically, we're setting the top corner at the midpoint of the target div minus half the height of the dialog and the left at the midpoint minus half the width of the dialog.

score 0 · Answer 3 · edited May 23 '17 at 10:34

$('#editItemDialog').hide();
$('#closeEditItemDialog').click( function() {
   $('#editItemDialog').hide('slow');
});

$('.labelEdit').hover( function() {
               $(this).parent().prev().css('border', 'solid 1px blue');    
             }, function() {
                $(this).parent().prev().css('border', 'solid 1px white'); 
});


$('.labelEdit').click( function() {
   $('#editItemDialog').center();
   $('#editItemDialog').show('slow');

});
jQuery.fn.center = function () {
   this.css("position","absolute");
   this.css("top", (($(window).height() - this.outerHeight()) / 2) +        $(window).scrollTop() + "px");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) +  $(window).scrollLeft() + "px");
return this;
}

I got this from this answer

trying to get an absolute positioned div to center within another relative positioned div

3 Answers3