jQuery: centrare orizzontalmente e verticalmente un elemento privo di dimensioni

È molto difficile centrare orizzontalmente e verticalmente un elemento privo di dimensioni con i soli CSS. Tipico il caso di un elemento posizionato in modo assoluto in un contenitore. Fortunatamente possiamo usare jQuery. Vediamo come.

Una semplice struttura HTML:

<div id="parent">
	<div id="child">Test</div>
</div>

Con degli stili CSS che lasciano l'elemento figlio senza dimensioni:

#parent {
	width: 20em;
	height: 20em;
	background: silver;
	position: relative;
	margin: 1em;
	border: thick solid;
}

#child {
	position: absolute;
	background: yellow;
	padding: 1em;
}

Dobbiamo solo ottenere gli offset superiore e sinistro sottraendo dalla larghezza e dall'altezza del genitore la larghezza e altezza intrinseche del discendente e dividendo i valori per 2:

$(function() {

	var parent = $('#parent'),
	    child = $('#child'),
	    $top = (parent.height() - child.outerHeight()) / 2,
	    $left = (parent.width() - child.outerWidth()) / 2;
	    
	child.css({
		top: $top,
		left: $left
	});


});

Potete visionare l'esempio finale in questa pagina.