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