Alineación con el posicionamiento relativo y absoluto

Question

¿Cómo podría centrar el cuadro azul dentro del rojo? Veo que el lado izquierdo de la caja azul está exactamente en el medio de la caja roja, pero me gustaría centrar toda la caja azul, no su lado izquierdo. Las dimensiones de los cuadros no son constantes. Quiero alinear independientemente de las dimensiones de los cuadros. Ejemplo para jugar con here. Gracias !

HTML:

<div id="rel"> 
    <span id="abs">Why I'm not centered ?</span> 
</div> 

CSS:

#rel { 
    position: relative; 
    top: 10px; 
    left: 20px; 
    width: 400px; 
    height: 300px; 
    border: 1px solid red; 
    text-align: center; 
} 

#abs { 
    position: absolute; 
    bottom: 15px; 
    width: 300px; 
    height: 200px; 
    border: 1px solid blue; 
} 

Answer 1

Si usted es capaz de cambiar la etiqueta <span> a un <div>

<div id="rel"> 
    <div id="abs">Why I'm not centered ?</div> 
</div> 

a continuación, esta pieza de CSS debería funcionar.

#rel { 
position: absolute; 
top: 10px; 
left: 20px; 
width: 400px; 
height: 300px; 
border: 1px solid red; 
text-align: center; } 

#abs { 
width: 300px; 
height: 200px; 
border: 1px solid blue; 
margin: auto; 
margin-top: 50px; } 

creo que es mejor utilizar una mayor automatización de la caja cerrada que serían necesarios menos cambios en caso de que cambie el tamaño de la caja contenedora.

Answer 2

Se podría añadir a left:50px#abs si eso es todo lo que quiera ...

#abs { 
    position: absolute; 
    bottom: 15px; 
    width: 300px; 
    height: 200px; 
    border: 1px solid blue; 
    left:50px; 
} 

Answer 3

Si va a definir las dimensiones así (200 píxeles x 300 píxeles y 300 píxeles x 400px), Así es como se puede centrar:

#rel { 
    position: relative; 
    top: 10px; 
    left: 20px; 
    width: 400px; 
    height: 300px; 
    border: 1px solid red; 
    text-align: center; 
} 

#abs { 
    position: absolute; 
    width: 300px; 
    height: 200px; 
    border: 1px solid blue; 
    margin: 49px 0 0 49px; 
} 

Answer 4

Esto debería funcionar

#abs { 
    position: absolute; 
    left: auto; 
    right: auto; 
    bottom: 15px; 
    width: 300px; 
    height: 200px; 
    border: 1px solid blue; 
} 

Answer 5

Usted puede comprobar en mi solución aquí en http://jsfiddle.net/NN68Z/96/

Yo lo siguiente a la css

#rel { 
     position: relative; 
     top: 10px; 
     left: 20px; 
     right: 20px; 
     width: 400px; 
     height: 300px; 
     border: 1px solid red; 
     text-align: center; 

     display: table-cell; 
     vertical-align: middle; 
    } 

    #abs { 
     display: block; 
     bottom: 15px; 
     width: 300px; 
     height: 200px; 
     border: 1px solid blue; 
     margin: 0 auto; 
    }