Центрирование необходимо для того, чтобы ваш блок находился по середине. Обычно это первый основной блок, внутри которого находится сам сайт. В этой статье я приведу 3 основных способа центрирования, которые использую при вёрстке. 1. Первый способ заключается в указании свойствах блока автоматические отступы margin для левого и правого края. Таким образом для любого разрешения браузер сам вычислит положение блока.
CSS:
#wrap {margin: 0px auto; width: 600px; height: 400px; background: #000 }
HTML:
...
<body>
<div id="wrap">Текст</div>
</body>
Недостатки: плохая поддержка браузеров IE6. Практически невозможно создать одинаковые отступы сверху и снизу.
2. Суть второго способа заключается в применении атрибута align="center".
CSS:
#wrap {width: 600px; height: 400px; background: #000;text-align: left }
HTML:
...
<body>
<div align="center">
<div id="wrap">Текст</div>
</div>
</body>
Недостатки: Приходится обрамлять наш блок в ещё один div, а в свойствах для самого блока попутно указывать форматирование текста по левому краю, иначе все дочерние элементы будут центроваться. Не получится сделать равные отступы сверху и снизу
3. С применение position: absolute. Идея такова, что наш блок получает значения позиции середины, вычисляемое в процентах и потом с помощью отрицательного отступа задаётся колонка:
CSS:
#wrap {position: absolute; left: 50%; top: 50%; margin-left: -300px; margin-top: -200px; width: 600px; height: 400px; background: #000 }
HTML:
...
<body>
<div id="wrap">Текст</div>
</body>
Недостатки:Увеличивается количество CSS кода, хотя теперь мы и можем отцентировать наш блок точно по центру. Ещё к недостатком относится тот факт, что при уменьшении размера окна содержимое уходит за пределы окна и его не достать скроллом.
