How can I position my jQuery dialog to center?

Jquery Problem Overview

I have tried following code, but it only positions dialogs left upper corner position to center, and that makes element to be aligned to right. How can I center dialog to real center which counts elements width, so that center line will cut dialog to 50% 50% halfs?

$('.selector').dialog({ position: 'center' });

http://docs.jquery.com/UI/Dialog#option-position

Jquery Solutions

Solution 1 - Jquery

The latest jQuery UI has a position component:

$("#myDialog").position({
   my: "center",
   at: "center",
   of: window
});

Doc: http://jqueryui.com/demos/position/
Get: http://jqueryui.com/download

Solution 2 - Jquery

I'm pretty sure you shouldn't need to set a position:

$("#dialog").dialog();

should center by default.

I did have a look at the article, and also checked what it says on the official jquery-ui site about positioning a dialog : and in it were discussed 2 states of: initialise and after initialise.

Code examples - (taken from jQuery UI 2009-12-03)

Initialize a dialog with the position option specified.

$('.selector').dialog({ position: 'top' });

Get or set the position option, after init.

//getter
var position = $('.selector').dialog('option', 'position');
//setter
$('.selector').dialog('option', 'position', 'top');

I think that if you were to remove the position attribute you would find it centers by itself else try the second setter option where you define 3 elements of "option" "position" and "center".

Solution 3 - Jquery

Because the dialog need a position, You need to include the js position

<script src="jquery.ui.position.js"></script>

Solution 4 - Jquery

open: function () {

	var win = $(window);

	$(this).parent().css({
		position: 'absolute',
		left: (win.width() - $(this).parent().outerWidth()) / 2,
		top: (win.height() - $(this).parent().outerHeight()) / 2
	});
}

Solution 5 - Jquery

So if anyone hits this page like I did, or for when I forget in 15 minutes, I'm using jqueryui dialog version 1.10.1 and jquery 1.9.1 with ie8 in an iframe(blah), and it needs a within specified or it doesn't work, i.e.

position: {
 my: "center bottom",
 at: "center top",
 of: $("#submitbutton"),
 within: $(".content")
}

Thanks to @vm370 for pointing me in the right direction.

Solution 6 - Jquery

I'm getting best results to put jQuery dialog in the center of browser's window with:

position: { my: "center bottom", at: "center center", of: window },

There's probably more accurate way to position it with option "using" as described in the documentation at http://api.jqueryui.com/position/ but I'm in a hurry...

Solution 7 - Jquery

To fix center position, I use:

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}

Solution 8 - Jquery

Try this....

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

Solution 9 - Jquery

Jquery UI 1.9.2, jquery and the later versions don' support IE8

I found two solutions for that.

Rollback to jquery UI 1.7.2 to support IE8,
Try this code with Jquery UI 1.9.2

position: {my: "center",  at: "center", of: $("body"),within: $("body") }

Solution 10 - Jquery

I have to call function dialog() twice to position the dialog (jQuery v1.11.2 / jQueryUI v1.10.4).

$("#myDialog").dialog({
    /* initial dialog parameters */
}).dialog({
    position: {
        my: "center center",
        at: "center center",
        of: window
    }
});

Solution 11 - Jquery

Another thing that can give you hell with JQuery Dialog positioning, especially for documents larger than the browser view port - you must add the declaration

<!DOCTYPE html>

At the top of your document.

Without it, jquery tends to put the dialog on the bottom of the page and errors may occur when trying to drag it.

Solution 12 - Jquery

Following position parameter worked for me

position: { my: "right bottom", at: "center center", of: window },

Good luck!

Solution 13 - Jquery

According to the following discussion, the problem could be due to less IE compatibility in the newer jQuery versions, reverting back to 1.7.2 seems to resolve the problem, which only occurs in IE8. http://forum.jquery.com/topic/jquery-ui-dialog-positioning-not-working-in-ie-8

Solution 14 - Jquery

I had a problem with this and I finally figured this out. Until today I was using a really old version of jQuery, version 1.8.2.

Everywhere where I had used dialog I had initialised it with the following position option:

$.dialog({
    position: "center"
});

However, I found that removing position: "center" or replacing it with the correct syntax didn't do the trick, for example:

$.dialog({
    position: {
       my: "center",
       at: "center",
       of: window
    }
});

Although the above is correct, I was also using option to set the position as center when I loaded the page, in the old way, like so:

// The wrong old way of keeping a dialog centered
passwordDialogInstance.dialog("option", "position", "center");

This was causing all of my dialog windows to stick to the top left of the view port.

I had to replace all instances of this with the correct new syntax below:

passwordDialogInstance.dialog(
    "option",
    "position", 
    { my: "center", at: "center", of: window }
);

Solution 15 - Jquery

If you are using individual jquery files or a custom jquery download either way make sure you also have jquery.ui.position.js added to your page.

Solution 16 - Jquery

Are you running into this in IE only? If so, try adding this to the FIRST line of your page's HEAD tag:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

I had though that all compatibility issues were fixed in later jQueries, but I ran into this one today.

Solution 17 - Jquery

Try this for older versions and somebody who don't want to use position:

$("#dialog-div-id").dialog({position: ['center', 'top'],....

Solution 18 - Jquery

You also need to do manual re-centering if using jquery ui on mobile devices - the dialog is manually positioned via a 'left & top' css property. if the user switches orientation, the positioning is no longer centered, and must be adapted / re-centered afterwards.

Solution 19 - Jquery

For Win7/IE9 environment just set in your css file:

.ui-dialog {
   top: 100px;
   left: 350px !important;
}

Solution 20 - Jquery

I fixed with css:

.ui-dialog .ui-dialog-content {
  width: 975px!important;
  height: 685px!important;
  position: fixed;
  top: 5%;
  left: 50%;
  margin:0 0 0 -488px;
}

Solution 21 - Jquery

Could not get IE9 to center the dialog.

Fixed it by adding this to the css:

.ui-dialog {
    left:1%;
    right:1%;
}

Percent doesn't matter. Any small number worked.

Content Type	Original Author	Original Content on Stackoverflow
Question	newbie	View Question on Stackoverflow
Solution 1 - Jquery	WhyNotHugo	View Answer on Stackoverflow
Solution 2 - Jquery	Luke Duddridge	View Answer on Stackoverflow
Solution 3 - Jquery	projo	View Answer on Stackoverflow
Solution 4 - Jquery	Jean G.T	View Answer on Stackoverflow
Solution 5 - Jquery	Mike	View Answer on Stackoverflow
Solution 6 - Jquery	Derek Gogol	View Answer on Stackoverflow
Solution 7 - Jquery	Eduardo Cuomo	View Answer on Stackoverflow
Solution 8 - Jquery	Rikin Patel	View Answer on Stackoverflow
Solution 9 - Jquery	r-arun-r	View Answer on Stackoverflow
Solution 10 - Jquery	okki	View Answer on Stackoverflow
Solution 11 - Jquery	thedrs	View Answer on Stackoverflow
Solution 12 - Jquery	Rakesh Prajapati	View Answer on Stackoverflow
Solution 13 - Jquery	ArgisIsland	View Answer on Stackoverflow
Solution 14 - Jquery	Luke	View Answer on Stackoverflow
Solution 15 - Jquery	Ioannis Suarez	View Answer on Stackoverflow
Solution 16 - Jquery	John	View Answer on Stackoverflow
Solution 17 - Jquery	Aneesh Vijendran	View Answer on Stackoverflow
Solution 18 - Jquery	gekido	View Answer on Stackoverflow
Solution 19 - Jquery	Nikolay	View Answer on Stackoverflow
Solution 20 - Jquery	Liko	View Answer on Stackoverflow
Solution 21 - Jquery	SwellBuilt	View Answer on Stackoverflow