¿Cómo se puede centrar horizontalmente un <div> dentro de otro <div>?

¿Se puede centrar horizontalmente un <div> que se encuentra dentro de otro <div>? El código HTML sería algo como esto:

<div id="padre" style="width: 100%">  
    <div id="hijo"> Lo que sea... </div>
</div>

Estás leyendo una traducción autorizada de la pregunta How to horizontally center a div in a div? planteada por Lukas en StackOverflow.

Respuestas

Si el <div> hijo tiene una anchura definida, entonces utiliza el truco de aplicar márgenes laterales automáticos:

#hijo {
    margin: 0 auto;    
    width: 50%;  /* la anchura también puede ser en píxeles */
}

Si el <div> hijo no tiene una anchura definida, utiliza este otro truco:

#padre {
    text-align: center;
    width: 100%;
}
 
#hijo {
  display: inline-block;
}

@librosweb

5 octubre 2014, 20:36