Căn chỉnh với vị trí tương đối và tuyệt đối

Question

Làm cách nào tôi có thể căn giữa hộp màu xanh bên trong hộp màu đỏ? Tôi thấy rằng phía bên trái của hộp màu xanh chính xác nằm ở giữa hộp màu đỏ, nhưng tôi muốn căn giữa toàn bộ ô màu xanh, chứ không phải cạnh trái của nó. Kích thước của các hộp không phải là hằng số. Tôi muốn căn chỉnh bất kể kích thước hộp. Ví dụ để chơi với here. Cảm ơn !

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

Nếu bạn có thể thay đổi thẻ <span> đến một <div>

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

Sau đó, tác phẩm này của CSS nên làm việc.

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

Tôi nghĩ tốt hơn nên sử dụng nhiều hộp tự động hơn nếu bạn thay đổi kích thước của hộp chứa.

Answer 2

Bạn có thể thêm left:50px để #abs nếu đó là tất cả các bạn muốn ...

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

Answer 3

Nếu bạn đang đi để xác định kích thước như thế (200px x 300px và 300px x 400px), dưới đây là cách nó có thể được làm trung tâm:

#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

này nên làm việc

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

Answer 5

Bạn có thể kiểm tra tại giải pháp của tôi ở đây tại http://jsfiddle.net/NN68Z/96/

tôi sau vào 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; 
    }