Vediamo come è possibile cenrtare orizzontalmente e verticalmente un box con l’utilizzo dei css.
In questo esempio utilizzeremo il tag div e una classe css, niente ci vieta di utilizzare un altro tag che abbia display block e magari definire invece di una classe in id css. In ogni caso a livello logico se stiamo definendo un box il tag opportuno dovrebbe essere il div

Per prima cosa definiamo l’HTML

<div class="elementoCentrato">&nbsp;</div>

Ora supponiamo che il box debba essere largo 400px e alto 400px, il bordo di un pixel e un padding su ciascun lato di 5px.
Per ottere il risultato desidarato la classe da definire tramite fogli di stile è

.elementoCentrato{
	position:fixed;
	width:400px;
    height:400px;
	border:1px solid #000;
	background-color:#FFFFFF;
	padding:5px;
	top:50%;
	left:50%;
	margin:-206px 0 0 -206px;
}

In parole povere per centrare il box basta assegnare le dimensioni, eventuali bordi e eventuale padding, definire le proprietà css

top:50%;
left:50%;

e successivamente assegnare un margine superiore e sinistro negativo il cui valore è dato da:

Margine superiore = (altezza box + padding superiore + padding inferiore + bordo superiore + bordo inferiore) / 2
Margine sinistro = (larghezza box + padding sinistro + padding destro + bordo sinistro + bordo destro) / 2

Se per i bordi e per i padding sono uguali le coppie (sinistro-destro) e (superiore inferiori) il box risulterà perfettamente centrato.