Приветствую всех на своем блоге, где я пишу в основном о разичных css-фишках, которые можно делать с элементами на веб-страницах. В этой статье мы рассмотрим не фишку, а скорее стандартный прием, который позволяет сделать в css div-блок по центру веб-страницы или родительского элемента. Кроме этого я также записал короткое видео, в котором показал центровку на примере двух блоков. Вот оно:
Сам прием
Чтобы не лить воду я сразу покажу, как это реализовывается, а потом еще расскажу, что такое родительский элемент, а то может кто из вас не понимает. Так вот, вся суть центровки заключается в следующем:
- Прописываем нашему div-у определенную ширину (обязательно)
- Определяем для него внешние отступы –
margin: 0 auto;
Например, в желтом контейнере (люблю я все на желтых блоках показывать, правда 
) лежит серый блок. Разметка выглядит так:
<body>
<div id = "ct">
<div></div>
</div>
</body>
Стили:
#ct{
width: 400px;
height: 400px;
background-color: yellow
}
#ct div{
background: grey;
width: 100px;
height: 100px;
}
Тут блок #ct выступает родителем для пустого div, потому что он лежит в нем. Body, в свою очередь, является родителем для #ct. Наш серый блок в 4 раза меньше своего контейнера и по умолчанию будет прижат к его верхнему левому краю. Как нам его отцентировать? Все просто:
#ct div{
Width: 100px;
Margin: 0 auto;
}
Ширину мы уже задали ранее, я просто еще раз ее записал чтобы подчеркнуть, что ширину для центровки нужно записывать ОБЯЗАТЕЛЬНО! Второе обязательное свойство – margin: 0 auto, где 0 – отступ сверху и снизу (вы можете написать другой, если что), а auto это как раз то волшебное слово, которое центрирует элемент по горизонтали. Давайте проверим.
Все работает, мы добились поставленной задачи, хотя она и была очень простой. Прием работает даже в том случае, если сам родительский блок не имеет явных размеров. Например, body – это тело страницы и мы ему ширину не задаем, но если для #ct записать margin: 0 auto (ширина у этого контейнера и так уже определена), то он тоже станет по центру относительно своего родителя, то есть относительно body.
Итог
Вот так я обещал вам в конце объяснить, что такое родитель, но вы уже и сами все поняли, правда? По-моему все просто. В каком теге лежит элемент, тот и является его родителем. В общем, вот такой вот простой прием для центровки блочных элементов. Если у вас есть какие-то вопросы по нему, то пишите в комментарии, обсудим