Центрирование блока по горизонтали

Центрирование блока по горизонтали

Для того, чтобы отцентрировать блок по горизонтали с помощью чистого CSS нужно точно задать его ширину и установить отступы на auto:

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

Центрирование блока по горизонтали и вертикали

Для центрирования блока по горизонтали и по вертикали также нужно задать точные размеры для блока и позиционировать абсолютно с 50% смещением относительно левого верхнего угла окна. Корректировка центрального положения производится с помощью указания отрицательных отступов в половину указанных размеров блока соответственно.

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

Горизонтальное и вертикальное центрирование на jQuery

Если размеры блока не известны, но центрировать его все же необходимо, то тогда на выручку придет javascript.

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

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