Разница на 50% непрозрачна и отображается поверх содержимого сайта и имеет фиксированную ширину 960 пикселей (она создается jQuery).
Как я могу центрировать его по горизонтали?
margin: 0 auto; не работает: (
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();