Сегодня рассмотрим – создание функции, которая позволит позиционировать div блок (или любой другой html элемент) по центру страницы.
Что у нас есть? – вот такой div:
<div id="Block">div блок с произвольным содержанием... div>
C уникальным ID – Block
Теперь давайте создадим функцию позиционирования элемента:
jQuery.fn.DivCenter = function () {
this.css("position","absolute");
this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
return this;
}
Где как вы видите – изменяем css стили и указываем блоку
1) Абсолютную позицию
2) Расстояние от верха страницы.
3) Расстояние от левой границы страницы.
4) Возвращаем значаение
Этой функции мы дали название DivCenter и для ее запуска (например, после загрузки страницы) можно использовать следующий код:
$(document).ready(function() {
$("#Block").DivCenter();
});