Ausrichtung mit relativer und absoluter Positionierung

Question

Wie könnte ich die blaue Box in der roten zentrieren? Ich sehe, dass die linke Seite der blauen Box genau in der Mitte der roten Box ist, aber ich möchte die ganze blaue Box zentrieren, nicht ihre linke Seite. Die Abmessungen der Boxen sind nicht konstant. Ich möchte unabhängig von Boxen Dimensionen ausrichten. Beispiel zum Spielen mit here. Vielen Dank !

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

arbeiten sollten, wenn Sie in der Lage sind, zu ändern Sie den <span> Tag zu einem <div>

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

Dann sollte dieses Stück CSS arbeiten.

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

Ich denke, es ist besser, mehr Automatisierung für die geschlossene Box zu verwenden, da weniger Änderungen erforderlich wären, sollten Sie die Größe des Behälterkastens ändern.

Answer 2

Sie left:50px zu #abs hinzufügen könnte, wenn das ist alles, was Sie wollen ...

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

Answer 3

Wenn Sie Dimensionen wie das (200px x 300px und 300px x 400px) zu definieren, gehen, hier ist, wie es zentriert werden kann:

#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

Diese

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

Answer 5

Sie können http://jsfiddle.net/NN68Z/96/

meine Lösung hier prüfe ich auf die CSS folgendes hat

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