como centrar un div dentro de otro div de manera vertical

[tonieet]

hola a todos!

pues eso... quiero centrar un div dentro de otro div de manera vertical y no me sale,

de manera horizontal, simplemente pongo:
margin-left: auto;
margin-right: auto;

y ya esta centrado, pero de manera vertical he intentado poner, magin-top y margin-bottom auto pero no funciona.

http://codepen.io/anon/pen/ZbLGLa

alguien sabe por que?

gracias.

[michellqm]

Saludos!

he enfrentado ese problema cientos de veces y encontré una agradable solución en css

agrégale al contenedor padre dos lineas c: y magia!

Pero estate atento al responsive pues el display flex muestra los elementos inline independientemente de la resolución

Código CSS:

.uno{
  height:200px;
  width:800px;
  background-color:green;
  display: flex;
  align-items: center;
 
}
 

http://codepen.io/Michellqm/pen/pjRJBL

Espero ayude

[Batan]

Aquí muestras 6 trucos con los que puedes centrar verticalmente texto y contenido dentro de una capa. Algunas son perfectas para el responsive.

[tonieet]

Iniciado por michellqm

Saludos!

he enfrentado ese problema cientos de veces y encontré una agradable solución en css

agrégale al contenedor padre dos lineas c: y magia!

Pero estate atento al responsive pues el display flex muestra los elementos inline independientemente de la resolución

Código CSS:

.uno{
  height:200px;
  width:800px;
  background-color:green;
  display: flex;
  align-items: center;
 
}
 

http://codepen.io/Michellqm/pen/pjRJBL

Espero ayude

hola michellqm!

lo primero de todo darte las gracias por responder, pero no me sirve del todo, por que en Safari no funciona.

Lo que estoy buscando exactamente es tener un div de 300px alto por 800px de ancho en el cual voy a escribir un texto dentro, y este texto quiero que este centrado tanto en vertical como horizontal.

y quiero que este centrado aunque yo cambie el tamaño del texto (mayor o menor cantidad de palabras o lineas)

mi idea era hacer un div dentro del principal, de medida "auto" para que se adaptase al texto, y centrar de alguna manera este "div contenedor del texto" pero igual esta idea no es la manera correcta de acerlo, no lo se

[michellqm]

ya veo, casualmente safari es el único que no tengo en mi pc xD pero esas cosas pasan

Hay otra manera, usando display: table-cell; para hacerle creer al elemento que es una tabla y por ende replique el posicionamiento de una como tal

Ahora bien, el inconveniente que le veo a este método es que no puedes asignarle un ancho al contenedor padre, básicamente lo ignora, pero puedes hacer uno del padding para afectar solo estos costados, creo que es un mal menor, este elemento es útil cuando no sabes las medidas del contenedor hijo.

acá un ejemplo:

http://codepen.io/Michellqm/pen/yYgaBm

testealo en safari a ver ><

también puedes darle una ojeada al artículo que te colocó Batan que tiene otras formas de centrarlo incluyendo el uso de porcentajes

Saludos!