Есть несколько правильных способов расположить div блок по центру. В данной статье будет описано три, наиболее распространенных.
Первыми двумя пользуются те, кто хочет добиться правильного отображения в старых браузерах, третьим способом пользуются те, кто хочет просто выровнять div блок по центру.
Способ выравнивания №1 — не универсальный:
.var_1 { position: relative; height: 30px; background: #eee; } .var_1 > div { left: 50%; width: 500px; margin-left: -250px; position: absolute; background: #e99; }
Минусы:
- используется абсолютное позиционирование, что влияет на общую картину и потребуется использовать дополнительный внешний блок;
- надо считать чему равна половина блока.
Способ выравнивания №2 — старинный:
.var_2 { position: relative; float: right; right: 50%; background: #e4e4e4; } .var_2 > div { position: relative; float: left; left: 50%; width: 500px; background: #ee9; }
Минусы:
- Необходимо использовать дополнительный внешний блок;
- Необходимо использовать внешний вспомогательный блок, нейтрализующий влияние свойства float;
- Дополнительный блок может испортить внешний вид.
Способ выравнивания №3 — лучший:
.var_3 { margin-left: auto; margin-right: auto; width: 500px; background: #9e9; }
В данном примере минусов нет. Все аккуратно и быстро. Может возникнуть резонный вопрос — что делать, если не известна ширина блока но надо расположить div блок по центру?
Все просто — нужно добавить свойство display: table; и проблема будет решена. Этот способ подходит, чтобы расположить любой div блок по центру, будь то меню, блок с контентом, изображение в виде блока и т.п.