Способов существует масса, но далеко не все позволяют выровнять div валидно. Я приведу в пример самые удачные и простые способы.
Для начала вспомним о margin- свойстве для установки ширины полей сразу для всех сторон элемента.
| Число значений | Описание записи |
|---|---|
| 1 | Отступы будут установлены одновременно от каждого края элемента. |
| 2 | Первое значение устанавливает отступ от верхнего и нижнего края, второе — от левого и правого. |
| 3 | Первое значение задает отступ от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края. |
| 4 | Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края. |
Способ 1. С auto
margin:0 auto;
Очень эффективный метод, который к тому-же позволяет выровнять отступы сверху и снизу. Всё просто, как угол дома. Имеется блок с определённой шириной (в пикселях, либо процентах), которому с помощью свойства «auto» задаём одинаковый отступ справа и слева, в итоге получаем div-блок по центру.
margin:10px auto;
Для выравнивания сверху и снизу:
margin:10px auto 5px;
Способ 2. С %%
Имеем блок шириной 60%, чтобы выровнять его по центру, нам нужно боковые отступы сделать по 20% справа и слева соответственно. Смотрим код:
#bl2 {
margin:0 20% 0 20%;
width:60%;
}
Не парясь особо, получаем блок по центру, выровненный школьной математикой (60 + 20 + 20)- угадали сколько будет?
Способ 3. С позиционированием (ишак 7 нас тут может подвести, ибо отрицательных значений не ест)
#bl3{
left: 50%;
margin-left: -500px;
position: absolute;
width: 1000px;
}
Способ 4. Использование дополнительного блока (подсмотрен где-то на просторах инета)
Ни один метод не решает проблему с float внутри блока, если ширина блока заведомо не известна (например, меню).
В таких случаях используют дополнительный блок, который обворачивает выравниваемый блок. Стиль примерно так:
#dop-block{
position: relative;
float: right;
right: 50%;
}
#block{
position: relative;
float: left;
left: 50%;
} 
