В этой короткой заметке Вы узнаете о нескольких способах центрирования объектов на странице по вертикали и горизонтали.
При создании веб страничек Вы, наверняка, сталкивались с ситуацией когда необходимо какой-нибудь объект разместить в самом центре. Существует множество путей решения этой проблемы.
Начнем с основ:
.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(), они берут во внимание ширину отступов и границ.
Большой плюс данного метода заключается в том, что Вам не обязательно знать размер объекта.
Надеюсь, Вам это пригодится!