Как горизонтально центрировать div div даже после изменения размера браузера?

Question

Я пытаюсь добавить элемент в DOM с помощью jquery. Я хочу, чтобы он накладывался сверху (z-index) всего другого контента (уже установлены сотни z-индексов), и он должен всегда выравниваться по центру.

При добавлении этого div в DOM, i m устанавливает его свойство «left» в значение $ (window) .width()/2 - 971/2. 971 - это ширина div I m, которую нужно добавить. Это CSS для него

width: 971px; 
height: 669px; 
background-image: url(/path/to/image/); 
position: absolute; 
margin: 0px auto; 
z-index: 2500; 

Проблема заключается в том, что div не остается центрированным после изменения размера браузера. Я даже попытался с левым: 50% и некоторое отрицательное левое поле в пикселях. Если я устанавливаю свойство «left» по отношению к «экрану», то он центрируется только в том случае, если окно браузера максимизируется пользователем.

Что такое хороший позиционированный div с высоким индексом z, таким образом, чтобы он всегда был центрирован?

Answer 1

#someId{ 
    width: 971px; 
    height: 669px; 
    padding: 0; 
    border: 0; 

    margin-left:-486px; /* 971/2 */ 
    margin-top:-335px; /* 669/2 */ 

    position: fixed; 
    left: 50%; 
    top: 50%; 

    background-image: url(/path/to/image/); 
    z-index: 2500; 
} 

Я знаю, что вы сказали, что вы пробовали это - но это всегда работал для меня в любом браузере работает в стандартном режиме совместимый (даже есть), то, возможно, были выброшены не принимая во внимание границы или дополнения. Вот рабочий пример: http://jsfiddle.net/U3RrT/

Я только что понял, что это может быть потому, что вы установили над ним элемент с другим свойством position; попробуйте position:fixed;.

Answer 2

Во-первых, margin: 0px auto; достаточно, чтобы горизонтально центрировать div. Таким образом, только удаление свойства left может решить проблему.

---

если не, так как вы используете JQuery, есть .resize() событие window которого вы можете контролировать, чтобы исправить внешний вид снова.

Например

function resizeMyBox() { 
    //code to resize 
}  
$(function() { 
    resizeMyBox(); // Resize on DOM ready 
}); 
$(window).resize(function() { 
    resizeMyBox(); //Resize again on every resize 
});