centrar contenido en un div

[garciasanchezdani]

Hola, relacionado con mi tema anterior: http://www.forosdelweb.com/f53/texto...o-div-1002884/
Me gustaría saber cómo centrar el contenido de un div a lo alto...
A lo ancho ya lo tengo, usando text-align: center;
Pero mi problema viene a lo alto, ya que yo le aplico un margin-top, pero es una app que se ajusta a diferentes resoluciones (uso css-queries) y no se centra a lo alto...

Podéis ver el ejemplo aquí http://jsfiddle.net/cN2pS/ Lo que necesito es centrar el 1 de la esfera central, verticalmente. Horizontalmente, ya lo consigo gracias a text-align:center...pero verticalmente, no sé.

Espero vuestra ayuda. Saludos

[garciasanchezdani]

¿Alguna idea?

[rossijona]

Buenas, si.

La forma de centrar un elemento en este caso DIV en un contenedor horizontalmente y verticalmente, por ejemplo: http://bioquim.com.uy/

antes que nada debes de darle al contenedor posicion relativa.

Código HTML:

.contenedor{position: relative;}

Luego el elemento que quieres centrar lo pones lo siguiente:

Código HTML:

.elemento{
position: absolute;
top: 50%;
left: 50%;
}

y tmb le debes de poner margin-top y margin-left. este margin top y left deben de ser la mitad del ancho para left y la mitad del alto para top.

Ahora el ejemplo completo:

Código HTML:

.elemento{
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px; // Si ves le restas la mitad del alto total del elemento
margin-left: -250px; // Y lo mismo para left
}

Mucha suerte!