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