Allineamento con posizionamento relativo e assoluto

Question

Come posso centrare la scatola blu all'interno di quella rossa? Vedo che il lato sinistro della casella blu si trova esattamente al centro del riquadro rosso, ma vorrei centrare l'intera scatola blu, non il lato sinistro. Le dimensioni delle scatole non sono costanti. Voglio allineare indipendentemente dalle dimensioni delle scatole. Esempio per giocare con here. Grazie !

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

Se siete in grado di cambiare il tag <span> ad un <div>

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

Allora questo pezzo di CSS dovrebbe funzionare.

#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; } 

penso che sia meglio usare una maggiore automazione per la scatola chiusa come sarebbero necessari meno modifiche si dovrebbe modificare le dimensioni del box contenitore.

Answer 2

Si potrebbe aggiungere left:50px a #abs se questo è tutto quello che vuoi ...

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

Answer 3

Se avete intenzione di definire le dimensioni del genere (200px x 300 px e 300px x 400px), ecco come può essere centrato:

#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

Questo dovrebbe funzionare

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

Answer 5

È possibile controllare la mia soluzione qui a http://jsfiddle.net/NN68Z/96/

ho fatto quanto segue alla 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; 
    }