Làm cách nào để căn giữa cửa sổ bật lên div bằng cách sử dụng Javascript

Question

Làm cách nào để căn chỉnh bộ phận bật lên đến giữa màn hình/màn hình bằng javascript?

Tôi đã thử sử dụng screen.width và screen.height để lấy trung tâm. Tuy nhiên, bộ phận được canh vào giữa trang di chuyển theo chiều dọc

Cảm ơn trước sự giúp đỡ nào và gợi ý

Answer 1

Hãy thử điều này:

<div id="popup" class="popup"> 
    This a vertically and horizontally centered popup. 
</div> 

<a onclick="showPopup('popup');">Show Popup</a> 

<style type="text/css"> 
    .popup { 
    width:200px; 
    height:100px; 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin:-50px 0 0 -100px; /* [-(height/2)px 0 0 -(width/2)px] */ 
    display:none; 
    } 
</style> 

<script type="text/javascript"> 
    function showPopup(id) { 
    var popup = document.getElementById(id); 
    popup.style.display = 'block'; 
    } 
</script> 

CSS giải thích: Div là 200x100, bạn đặt nó 50% từ trên xuống và 50% từ bên trái, nhưng để nó ở giữa hoàn toàn, bạn cần trừ 50% giá trị đó bằng một nửa chiều rộng và chiều cao, cách để làm điều này là sử dụng lề âm, do đó margin-top phải là giá trị âm của chiều cao/2 và lề trái phải là giá trị âm của chiều rộng/2.

Answer 2

thử:

function msgBox(message) 
{ 
    var msgbox = document.getElementById("msgbox"); 
    msgbox.innerHTML = message; 
    var x = (window.innerWidth/2) - (msgbox.offsetWidth/2); 
    var y = (window.offsetHeight/2) - (msgbox.offsetHeight/2);    
    msgbox.style.top = y; 
    msgbox.style.left = x; 
    msgbox.style.display = "block"; 
} 

Answer 3

Làm thế nào về chỉ làm với CSS:

<div class="div">Some Content......</div> 

.div { 
    margin-left: auto; 
    margin-right: auto; 
} 

Answer 4

Hãy thử cố định vị trí:

#box { 
    position: fixed; 
    width: 40%; 
    margin: 200px 30%; 
} 

Nó chỉ theo chiều ngang làm trung tâm. Dọc sẽ có một số chơi với. Tôi không biết các trình duyệt hoạt động khác nhau như thế nào với căn chỉnh theo chiều dọc.

Answer 5

Tôi cũng có vấn đề căn giữa dọc này trên bất kỳ trang web nào yêu cầu cuộn.

Chuyển sang position: fixed giải quyết nó, vì vậy:

position:fixed; 
top:50%; 
left:50%; 
margin:-50px 0 0 -100px; /* [-(height/2)px 0 0 -(width/2)px] */ 

này làm việc trong firefox, google chrome, safari (pc) và IE9.

Thật không may, tôi muốn nó xuất hiện trước mặt một pdf file - bật lên đã xuất hiện trước mặt sử dụng Firefox, Chrome nhưng đi phía sau trong IE9 và Safari ....