Вертикальное и горизонтальное центрирование div

Наверняка все сталкивались отцентрировать блок

Горизонтальное выравнивание:
*все делает margin:0 auto;

.className{
    margin:0 auto;
    width:200px;
    height:200px;
}

Этот способ работает для всех блочных элементов, для строчных необходимо добавить еще одно свойсво: display:block;



Вертикальное центрирование блока:
*для этого необходимо заранее знать размеры обьекта

.className{
    width:300px;
    height:200px;
    position:absolute;
    top:50%;
    margin:0px 0px 0px -150px;
}

 Вертикальное и горизонтальное центрирование:
*все как и в предыдущем примере

.className{
    width:300px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;
}

+
Горизонтальное и вертикальное выравнивание с помощью jQuery

$(window).resize(function(){ $('.className').css({
    position:'absolute',
    left: ($(document).width() - $('.className').outerWidth())/2,
    top: ($(document).height() - $('.className').outerHeight())/2
}); });

       // Запуск функции:
       $(window).resize();

Весь функционал встроен в функцию $(window).resize(), которая выполняется при каждом изменении окна браузера. Мы используем outerWidth() и outerHeight(), так как в отличии от width() и height(), они берут во внимание ширину отступов и границ.

Большой плюс данного метода заключается в том, что Вам не нужно знать размер объекта. Все расчитывается автоматически.