Alignement avec positionnement relatif et absolu

Question

Comment pourrais-je centrer la boîte bleue à l'intérieur de la boîte rouge? Je vois que le côté gauche de la boîte bleue est exactement au milieu de la boîte rouge, mais je voudrais centrer toute la boîte bleue, pas son côté gauche. Les dimensions des boîtes ne sont pas constantes. Je veux aligner indépendamment des dimensions des boîtes. Exemple pour jouer avec here. Merci !

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 vous êtes en mesure de changer l'étiquette <span> à un <div>

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

Ensuite, ce morceau de CSS devrait fonctionner.

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

je pense qu'il est préférable d'utiliser une plus grande automatisation pour la boîte fermée en moins de changements seraient nécessaires si vous changez la taille de la boîte de conteneur.

Answer 2

Vous pouvez ajouter left:50px à #abs si c'est tout ce que vous voulez ...

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

Answer 3

Si vous allez définir des dimensions comme ça (200px x 300px et 300px x 400px), voici comment il peut être centré:

#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

Cela devrait fonctionner

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

Answer 5

Vous pouvez vérifier ma solution ici à http://jsfiddle.net/NN68Z/96/

Je ne suit à 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; 
    }