Css/jQuery - центр абсолютного позиционирования div

Ответ 1

margin: 0 auto; не будет работать для элементов, которые абсолютно позиционируются. Вместо этого мы можем работать со свойствами самого элемента. Посмотрите скрипку...

http://jsfiddle.net/UnsungHero97/HnzyT/2/

Центрировать его горизонтально легко, так как вы знаете, что ширина AND позиционируется абсолютно. Все, что вам нужно сделать, это дать ему 2 свойства CSS:

width: 960px;
position: absolute;

/* ... other CSS properties... */

left: 50%; /* 1. move it to the right 50% of the width of the page; now the left side of the element is exactly in the middle */
margin-left: -480px; /* move the element to the left exactly half of its width and now the center of the element is centered horizontally */

Если вы хотите центрировать его как по вертикали, так и по горизонтали, вам нужно знать, насколько широк И, насколько высок этот элемент.

Надеюсь, это поможет. Христо

Ответ 2

Просто вычтите среднюю точку окна из половины ширины элемента при изменении размера. Здесь есть простой плагин, который можно легко разместить в вертикальном положении, если это необходимо:

$.fn.centerMe = function () {
    this.css('left', $(window).width()/2 - $(this).width()/2);
};

$(window).resize(function() { $('#yourElem').centerMe(); });

$('#yourElem').centerMe();

See working example →