@NueveReinas: che, si es texto al div la aplicas {text-align:center;} y si contiene una imagen {display: block; margin-left: auto; margin-right: auto;}
Lo de display: block; te sirve cuando tienes varios elementos (textos e imagenes) en el mismo div.
Ejemplo:
Código HTML:
Ver originalbody {background-color: #000;}
div{
background-color: #bbb;
border:2px solid #bbb;
height:400px;
width:400px;
/* centra texto */
text-align:center;
/* centrado vertical */
display: table-cell;
vertical-align: middle;
}
IMG.displayed
{
/* centra imagen: */
margin-left: auto;
margin-right: auto
/* hace que el elemento sea el unico horizontalmente, coje todo el width */
display: block;
}
<IMG class="displayed" src="http://www.w3.org/Style/Woolly/woolly-mc.png" alt="...">
Ahora intentemos lo mismo con <CENTER>
Código HTML:
Ver originalbody {background-color: #000;}
div{
background-color: #bbb;
border:2px solid #bbb;
height:400px;
width:400px;
}
<center>
<IMG class="displayed" src="http://www.w3.org/Style/Woolly/woolly-mc.png" alt="..."><br/> </center>
OK... hubo un centrado pero fue SOLO HORIZONTAL..... y peor... ahora supongamos no tenemos una imagen sino varias y no queremos seguir las recomendaciones de la W3C de usar CSS para el centrado:
Código HTML:
Ver originalbody {background-color: #000;}
div{
background-color: #bbb;
border:2px solid #bbb;
height:400px;
width:400px;
}
<center>
<IMG class="displayed" src="http://www.w3.org/Style/Woolly/woolly-mc.png" alt="..."> <IMG class="displayed" src="http://www.w3.org/Style/Woolly/woolly-mc.png" alt="..."> <IMG class="displayed" src="http://www.w3.org/Style/Woolly/woolly-mc.png" alt="..."> </center>
Que paso ahi ?
Si... podriamos poner un <br/> donde nos convenga (aun seguimos con el problema del centrado vertical) pero estamos ensuciando el HTML con elementos innecesarios!
Te recomiendo
este articulo