Centering modal window on the middle of a div

Question

I'm trying to center a modal dialog window in the middle (vertically and horizontally) of an outer div. I'm using a jquery plugin for the modal window. here is a picture of what I'm trying to accomplish

As you can see with the current code that I have it is almost centered but not quiet. here is my javascript code

$(id).css('top', $('#pagecontent').position().top + ($('#pagecontent').height() / 2) - ($(id).height() / 2));
$(id).css('left', $('#pagecontent').position().left + ($('#pagecontent').width() / 2) - ($(id).width() / 2));

pagecontent is the div rectangle where I'm trying to center the modal window

Any help would be greatly appreciated.

Thanks in advance Carlos

Answer 1

Try this: First, set the parent element with a relative position:

#pagecontent {position:relative;}

Then, set the modal window with absolute position that also has a top and left values ​​by 50% :

#modal {
  position:absolute;
  top:50%;
  left:50%;
}

Last, just set the margin-top and margin-left (negative) of the modal window based on it's height and width divided by two:

$id.css({
    'margin-top': -($id.outerHeight() / 2),
    'margin-left': -($id.outerWidth() / 2)
});

DEMO: http://jsfiddle.net/tovic/2QVX8/24/

Answer 2

Without the mentioned picture or a link to a live site, it's hard to provide an accurate answer.

Nonetheless, by looking at your code, you are centering the element, but you are not considering any margin or padding that may be applied to it or its parent.

---

Practical example:

Lets assume the following example to apply your code with the necessary correction:

Assuming the following Markup:

<div id="pagecontent">
  <div id="foobar">I'm at the very middle!</div>
</div>

With the following CSS:

#pagecontent {
  margin: 10px;
  padding: 10px;
  height: 240px;
  width: 360px;
  border: 1px solid #D9D9D9;
  position: relative;
}

#foobar {
  position: absolute;
  width: 200px;
  height: 20px;
  line-height: 20px;
  border: 1px solid blue;
}

Your jQuery code could be improved to:

var $inner   = $('#foobar'),
    $wrapper = $('#pagecontent');

$inner.css({
    'top'  : ($wrapper.outerHeight() / 2) - ($inner.outerHeight(true) / 2),
    'left' : ($wrapper.outerWidth() / 2) - ($inner.outerWidth(true) / 2)
});

---

Further explanation:

To collect the element width and height using jQuery, and at the same time getting the space occupied by the padding and margin declarations, you can use:

jQuery .outerWidth() function:

Description: Get the current computed width for the first element in the set of matched elements, including padding and border.

.outerWidth( [includeMargin] )

includeMargin A Boolean indicating whether to include the element's margin in the calculation.

jQuery .outerHeight() function:

Description: Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin. Returns an integer (without "px") representation of the value or null if called on an empty set of elements.

.outerHeight( [includeMargin] )

includeMargin A Boolean indicating whether to include the element's margin in the calculation.