posizionare dialog uial centro dello schermo

[ans66]

non riesco davvero a capire come posizionare il dialog ui al centro dello schermo. ho seguito molte indicazioni in rete ma senza riuscire a muovere la sua posizione. accetto qualsiasi consiglio. grazie

<style>
body{
		font: 62.5% "Trebuchet MS", sans-serif;
		margin: 50px;
	}
	.demoHeaders {
		margin-top: 2em;
	}
	#dialog-link {
		padding: .4em 1em .4em 20px;
		text-decoration: none;
		position: relative;
	}
	#dialog-link span.ui-icon {
		margin: 0 5px 0 0;
		position: absolute;
		left: .2em;
		top: 50%;
		margin-top: -8px;
	}
	#icons {
		margin: 0;
		padding: 0;
	}
	#icons li {
		margin: 2px;
		position: relative;
		padding: 4px 0;
		cursor: pointer;
		float: left;
		list-style: none;
	}
	#icons span.ui-icon {
		float: left;
		margin: 0 4px;
	}
	.fakewindowcontain .ui-widget-overlay {
		position: absolute;
	}
	select {
		width: 200px;
	}
.ui-dialog-titlebar {background:#B81B1B !important}
</style>

// dialog Box
$( "#button" ).button();
$( "#radioset" ).buttonset();



$( "#dialog" ).dialog({
	autoOpen: false,
  width: 400,
  buttons: [
		{
			text: "Ok",
			click: function() {
				$( this ).dialog( "close" );
			}
		},
		{
			text: "Cancel",
			click: function() {
				$( this ).dialog( "close" );
			}
		}
	]
});

<!-- ui-dialog -->
<div id="dialog" title="Inserisci il Codice">
	<p>Inserisci il codice da cercare:</p>
  <input type="text" id="testo" name="testo">
</div>

 

[anxx]

Ti basta impostare via css le seguenti proprietà:

#dialog {
    width: 200;
    height: 100;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -50px;
}

L'importante è scrivere width e height che non siano eccessivi e margin-top margin-left esattamente la metà delle dimensioni precedenti.