Làm thế nào để xác định vị trí một div ở trung tâm phía dưới màn hình

Question

Tôi có css này:

#manipulate 
{ 
    position:absolute; 
    width:300px; 
    height:300px; 
    background:#063; 
    bottom:0px; 
    right:25%; 
} 

Tôi có html này:

<div id="manipulate" align="center"> 

</div> 

Làm thế nào để chúng ta xác định vị trí div rằng ở trung tâm đáy của màn hình?!?

Answer 1

align="center" không có hiệu lực.

Vì bạn có position:absolute, tôi khuyên bạn nên định vị nó 50% từ bên trái và sau đó trừ đi một nửa chiều rộng của nó từ lề trái của nó.

#manipulate { 
    position:absolute; 
    width:300px; 
    height:300px; 
    background:#063; 
    bottom:0px; 
    right:25%; 
    left:50%; 
    margin-left:-150px; 
} 

Answer 2

Sử dụng lợi nhuận tiêu cực:

#manipulate 
{ 
    position:absolute; 
    width:300px; 
    height:300px; 
    margin-left:-150px; 
    background:#063; 
    bottom:0px; 
    left:50%; 
} 

Mấu chốt ở đây là width, left và margin-left tài sản.

Answer 3

Bạn có thể căn giữa nó bằng cách sử dụng lề tiêu cực NHƯNG xin lưu ý rằng nó sẽ căn giữa chính giữa trên màn hình NẾU bất kỳ div nào có chứa KHÔNG được đặt thành vị trí: tương đối;

Ví dụ: http://jsfiddle.net/aWNCm/

Vì vậy, cách tốt nhất để căn giữa chính xác div này là đặt thuộc tính vị trí thuộc tính chính xác cho các div chứa của nó nếu không nó sẽ bị mất theo một số cách ngẫu nhiên.

Answer 4

Đây là một giải pháp với hai divs:

HTML:

<div id="footer"> 
     <div id="center"> 
      Text here 
     </div> 
    </div> 

CSS:

#footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
} 
#center { 
    width: 500px; 
    margin: 0 auto; 
} 

Answer 5

Nếu bạn không hài lòng với việc sử dụng lợi nhuận tiêu cực, check this out.

HTML -

<div> 
Your Text 
</div> 

CSS -

div { 
    position: fixed; 
    left: 50%; 
    bottom: 20px; 
    transform: translate(-50%, -50%); 
    margin: 0 auto; 
} 

Đặc biệt hữu ích khi bạn không biết chiều rộng của div.