相對定位和絕對定位

Question

我怎麼能將紅框中的藍框居中？ 我看到藍框的左側正好位於紅框的中間，但我想將整個藍框放在中間，而不是左側。箱子的尺寸不是恆定的。我想要對齊，而不管框的尺寸。舉例與here一起玩。謝謝 ！

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

如果你能在<span>標籤更改爲<div>

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

然後這片CSS的應該工作。

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

我認爲這是更好地使用更多的自動化的封閉箱因爲將需要較少的變化，你應該改變容器框的大小。

Answer 2

你可以添加left:50px到#abs，如果這就是你想要的......

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

Answer 3

如果你要定義這樣的尺寸（200像素x 300像素，300像素x 400像素），這裏是它如何居中：

#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

這應該工作

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

Answer 5

您可以在http://jsfiddle.net/NN68Z/96/

在這裏我的解決辦法檢查我做了以下的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; 
    }