В этой короткой заметке Вы узнаете о нескольких способах центрирования объектов на странице по вертикали и горизонтали.

При создании веб страничек Вы, наверняка, сталкивались с ситуацией когда необходимо какой-нибудь объект разместить в самом центре. Существует множество путей решения этой проблемы.

Начнем с основ:

Горизонтальное центрирование с помощью CSS

 Это очень просто

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

Для центрирования по горизонтали Вам необходимо задать ширину, а также значение auto для левого и правого отступа (тут мы используем сокращенную запись CSS). Этот способ работает с блочными элементами (div, p, h1, прочее...). Для инлайновых (ссылки и изображения) элементов Вам необходимо добавить еще одно правило - display:block.

Выравнивание по горизонтали и вертикали

Центрирование в обоих направлениях осуществить немного сложнее. Вам необходимо знать заранее точные размеры объекта.

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

Позиционируя объект абсолютно, мы можем "вырвать" его из страницы и задать для него позицию по отношению к браузеру. Достаточно указать 50% для значений left и top и объект будет находится по центру. Единственное, что нам необходимо сделать, это передвинуть объект на половину высоты и ширины влево и вверх, чтобы он был в самом центре.

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

Как указывалось ранее - метод CSS прекрасно работает с объектами с известными размерами. Если их нет, тогда нам пригодится 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(), они берут во внимание ширину отступов и границ.

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

Надеюсь, Вам это пригодится!