Ridefinizione di una proprietà

[Marcolino's]

Allora il problema di oggi è questo
Sto cercando di ridefinire una proprietà di un elemento attraverso una classe, ma non riesco a ridefinirla in quanto prima era messa ad auto.
Ho un normale box nella pagina identificato come #container che ha dimensioni proprie e tramite una classe separata da applicare all'occorrenza ne modifico la forma.
Bene ho scoperto che se metto nell'id la proprietà margin: 2em auto; quando la vado a ridefinire nella classe questa non la legge.
Se elimino nell'ID tale prorpietà o meglio se tolgo il riferimento ad auto, va tutto a posto.
Un po' di codice:

#container {
	width: 600px;
	height: auto;
	margin: 2em auto;
	padding-top: 1em;
	padding-bottom: 2em;
	background: #3A73A5;
}
/*	centra un box nella pagina	*/
.centrato {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 400px;
        /*     top  right bottom left    */
	margin: -200px 0 0 -300px;
}

l'html

<div id="container" class="centrato">
   

Lorem ipsum....</p>
</div>

In pratica normalmente il box è nella pagina centrato a destra e a sinistra, mentre applicando la classe, dovrebbe, centrarsi anche in altezza ma non va per via di auto, se lo tolgo va tutto a posto, ma ovviamente non applicando la classe il box va dove gli pare se non rimetto auto.
Qualcuno sa darmi una mano?

[scimmiaparlante]

lo stile per l'id è considerato più importante di quello della classe e quindi ti rimane quello vecchio.
Potresti usare !important

http://www.html.it/pag/18947/la-keyword-important/

[Marcolino's]

Ottimo ha funzionato, pensavo ad un ennesimo baco dei CSS riguardo la clausola auto.
Ora devo rivedere ancora tutto perché ovviamente gli accordion (ma è un'altra storia) su IE non vanno.
Per i posteriori metto qui il codice usato.

#container {
	width: 600px;
	height: auto;
	margin: 2em auto;
	padding-top: 1em;
	padding-bottom: 2em;
	background: #3A73A5;
}
/*	centra un box nella pagina	*/
.centrato {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 400px;
        margin-top: -200px !important;
	margin-left: -300px !important;
}

in maiouscoletto le modifiche apportate rispetto all'altro mio post.