Выравнивание блоков div по центру (css, div html).
В данной статье я расскажу, как поместить блок div по центру. Способов существует множество, но далеко не все позволяют сделать именно то, что требуется. Я приведу в пример самые лучшие и простые способы.
Вообще, есть дюжина способов как правильно выровнять div блок по центру, каждый вебмастер использует свой любимый\наиболее удобный способ. Но тем не менее, есть несколько основных, наиболее популярных и универсальных способа. И конечно-же, валидные по всем современным стандартам.
И да, стоит сразу сказать, что данные способы могут не работать в ie6, или чём-то подобном. Я даже не обращаю внимание на данный браузер, не смотря на то, сколько людей им пользуется. Пора бы уже отучивать пользоваться старьём.
Итак, что мы имеем?
Способ 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. Смешанный
Данный способ посоветовал в комментариях sman.
#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%;
}
Самый простой и надежный, на мой взгляд смешанный:
19.11.2009 в 17:37#wrap {width: 1000px;
position: absolute;
left: 50%;
margin-left: -500px;
}
использую метод, который описан в комменте от sman
а из приведеныых автором больше всего понравился процентный. он все же логичнее, чем через margin, имхо
08.03.2010 в 01:31Я тоже
Я тоже использую его метод. Не знаю правда как, но он работает )
14.07.2011 в 17:12А авт орские методы не подошли ((
фиксированная ширина и пожишн абсолют, не всегда хорошо…
28.08.2014 в 08:27Огромное спасибо за статью. Еще большее спасибо sman!! Самый крутой способ, который только встречал! теперь только его и использую!
09.10.2011 в 10:33Спасибо Огромное автору смешанного варианта, в моем случае вообще ничего не помогало и только смешанный вариант выручил! Спасибо!
01.02.2013 в 04:09К сожалению, в этом способе есть небольшой недочет, а именно:
17.10.2013 в 21:01Если страницу сузить так, что она станет уже, чем блок (окно браузера решили уменьшить по горизонтали), то начало блока уйдет за левую границу страницы. Кому это не страшно — способ подходит на ура.
тоже самое, блок сбежал с поля боя налево куда ему нельзя. Сработала такая конструевина :
18.03.2014 в 22:03.bl09_dw{
float: center;
width: 98%;
padding: 20px 10px 20px 10px;
В тексте, где ширина рабочей области 900рх. Е плохо так смотрится )
параметр float со значением center не бывает
31.01.2019 в 20:40Говеннее способа я еще не видел, бери margin:0 auto и не е*и мозг w3.org
28.02.2019 в 03:23Спасибо автору за рецепты. Уже таблицами хотел делать(
21.12.2009 в 02:27Спасибо чувак, оч помогло
13.03.2010 в 07:06margin: auto; — не работает во многих браузерах и еще зависит о док тайпа.
21.06.2010 в 13:33Все отлично, когда ширина центрируемого блока фиксирована, будь то в процентах или в пиксах. А вот отцентрируйте мне блок с шириной ауто )) С помощью марджин. Увы-увы марджин не справляеться. Предлогайте варианты гуру. Я пользу два вложеных блок с позиционированием 50% и — 50%. Эффект «слайдинг дорс»
12.07.2010 в 14:25Спасибо за совет, 1-ый точно самый удобный и простой
29.01.2011 в 16:02left:50%;
02.04.2011 в 17:14margin-left:-25%;
left: 50%;
02.04.2011 в 17:22margin-left: половина ширины дива;
position: absolute;
Спасибо за советы. Помучался с настройкой div с помощью margin… И поставил нормальный table — результат: работает и отображается во всех браузерах НОРМАЛЬНО и ОДИНАКОВО!!! Так что не заморачивайтесь с div.
16.04.2011 в 00:43Ребят, всё конечно хорошо, но у меня вопрос такой:
01.05.2011 в 16:17Вот я имею несколько div блоков с float:left; , они все находятся на одной высоте. Как мне сделать так, чтоб при растягивании экрана, расстояния между ними тоже пропорционально растягивались?
Мне не подошел ни один вариант!!! А ещё есть:?
01.07.2011 в 11:45— У нас есть все размеры обуви, все цвета, все стили!
04.11.2011 в 09:05Так почему Вам не подходит наша обувь?
— У меня нет ног…
19.07.2011 в 13:29left:50%;где -425px это половина ширины выравнимаего по горизонтали блокаmargin-left:-425px;
Ни один метод не решает проблему с float внутри блока, если ширина блока заведомо не известна (например, меню).
08.08.2011 в 15:56В таких случаях использую дополнительный блок, который обворачивает выравниваемый блок. Стиль примерно так:[css]#dop-block{
position: relative;
float: right;
right: 50%;
}
#block{
position: relative;
float: left;
left: 50%;
}[/css]
Спасибо ВИКТОРУ за подсказку!
Как раз флоат и как раз менюшка, мало того что не известно размер блока/картинки, так еще неизвестно сколько будет этих блоков/картинок. А данный метод как раз подходит для ВЫРАВНИВАНИЯ МЕНЮ по центру!!!
13.08.2012 в 23:45Спасибо ВИКТОРУ за подсказку!
03.03.2013 в 18:58Промучался час! Отличный сайт! 🙂
Спасибо!!)
24.10.2013 в 00:21Спасибо Виктору! Давно искал решение, наконец-то вот оно! )
30.10.2013 в 13:50Спасибо, автор очень выручил!
помог 3 Способ, предыдущие не то делали.
я хотел сделать Картинку как фон, чтобы всегда была по центру и fixed.(потому что на background у меня уже стоит image)
а слоем выше основу сайта и чтоб скроллился ( основа у меня в html-таблице )
Вышло так как нужно, и таблица в центре и рисунок в центре под таблицей, и любой блок который добавляю также можно ставить в центр в любой слой.
[css].IMAGE{
left: 50%;
margin-left: -500px;
position: fixed;
width: 1000px;
z-index:1;
}
.TABLE{left: 50%;
24.08.2011 в 18:34margin-left: -500px;
position: absolute;
width: 1000px;
border:0;
top:10px;
z-index:2;
}[/css]
Есть до боли простой способ.. правда имеет один минус.. но я им раньше все время пользовался.
Это двойной тег div.. из минусов что нужно ставить 2 тега див, из плюсов то что работает везде и подходит всем и всегда.
Содержимое блока
28.08.2011 в 08:58[css].center {
07.09.2011 в 14:31position: relative;
left: 50%;
margin-left: -50%;
}[/css]
Спасибо, чувак. Способ 2 спас!
12.11.2011 в 18:48Спасибо большое, помогло!
15.01.2012 в 01:06НЕ знаю, у меня никак не получается, или же через раз получается…
29.02.2012 в 23:27Для выравнивания по-горизонтали этих способов должно хватить. Однако если у нас див-потомок имеет значение table-cell и стоит выравнивание по-вертикали, то не подходит ни один из перечисленных способов…
11.03.2012 в 11:08у меня вопрос а если допустим страница прокручена вниз, и а див всплывающий все равно всегда должен быть по центру ? как быть?
04.05.2012 в 11:10[css]*{
07.05.2012 в 19:11margin:0px;
padding:0px;
}
CENTER{
margin:0;
padding:0;
}
.conteiner{
width:900px;
height:20px;
margin:0;
padding:0;
position:relative;
background:red;
}[/css]
Приветсвую всех! Помогите установить ротатор по центру так что бы картинка была почти во весь экран и отображалась на разных мониторах одинаково по центру.
22.05.2012 в 14:52В IE первый метод не сработает, если странице прописан доктайп. В этом случае родительскому элементу выравниваемого блока нужно задать свойство text-align: center;
14.06.2012 в 23:47Не понимаю зачем все так усложнять, достаточно прописать
text-align:center;
и все дела.
20.06.2012 в 23:50КРАСАВЧИК, автор этой статьи. Большое спасибо ему за статью.
10.08.2012 в 20:24помог способ Андрея, так как у меня как раз два блока. спасибо=)
19.08.2012 в 00:06я на самом деле дико запутался. подскажите плиз-что нужно сделать, чтобы при изменении масштаба в браузере — блоки не съезжали в стороны.
25.08.2012 в 17:03Спасибо. Дай вам Бог здоровья! Очень ценная информация. Только один способ сработал. И я его нашел здесь)))
11.09.2012 в 00:16Добавил в закладки, спасибо!
10.01.2013 в 01:36Действительно действующий способ, если вы верстаете div:
23.01.2013 в 19:14«position:absolute;
width:99.6%;
text-align:center;»
Народ, элемент div вообще-то поддерживает атрибут «align» (не css), позволяющий сделать выравние элемента по центру родительского элемента 😀
24.01.2013 в 23:17Илья!!!! Спасибо!!! Гениально!)))
26.11.2013 в 01:35Способ 2 в IE 6 сразу помог, но появился горизонтальный скрол-бар. Пока не разобрался почему.
12.04.2013 в 19:10Жаль на сайте ucoz не мог выравнять. Наверно стили под эту систему не идут.
30.07.2013 в 19:164 сопосб ахрененный!!! Спасибо!
03.09.2013 в 17:47Вы себе не представляете на сколько помогли! О_О
Огромное спасибо! Долго не мог ничего придумать. Не знал про «auto».
27.09.2013 в 07:23Спасибо за статью. Довольно часто прибегаю к ней. Отдельное спасибо за динамичное меню.
16.11.2013 в 05:14Про способ 3 вообще забудьте, так как если кто-то зайдет с устройства у которого меньше разрешение чем сам блок, он будет просто на всю ширину и уедет за экран на минус, который вы задали….
19.12.2013 в 14:32Первый способ прокатывает без нуля впереди
22.12.2013 в 02:03margin: auto;
Спасибо! Сработало.
16.01.2014 в 09:33Виктору с комментариев огромное спасибо!
06.02.2014 в 23:01Спасибо автору. Мне помог Способ 4. Использование дополнительного блока
04.03.2014 в 14:36margin: 0 auto; работает даже для блоков переменной длины, но для них должно быть выставлено display: table;
18.03.2014 в 15:41Спасибо большое Виктору сработало отлично, 3 часа мучался.
06.09.2014 в 03:30Первый вариант реально самый лучший.
25.10.2014 в 19:32Выравнял навигацию в адаптивном шаблоне WP. 4 способ выручил! Спасибо огромное, ребята!
15.03.2015 в 07:17Статья ни о чём вообще не говорит. Пишете ради заработка, а не ради людей. Никто не против вашего заработка, но бредятину то зачем выкладывать? Только время чужое тратите…
18.04.2015 в 18:12Статья о том, как выровнять div по центру — об этом она и говорит. Какой из способов не помог тебе выровнять div по центру? Где тут бредятина? Другие комментарии ты читал, где люди советуют свои способы, где благодарят за работающие способы?
18.04.2015 в 23:09О данном методе выравнивания блоков прочитал в этом блоге, о чем очень большое СПАСИБО автору! Постоянно его использую при разработке веб-сайтов. Свой отзыв с благодарностью я уже оставлял ранее.
19.04.2015 в 00:47А вот на счет «бредятины», то надо на себя посмотреть Питер и задать вопрос самому-себе, а тем ли я в жизни занимаюсь и может разработка сайт это не мое. И больше успехов можно было достичь например в вязании или пении — это к примеру…
top: 0;
09.05.2015 в 12:10right: 0;
bottom: 0;
left: 0;
margin: auto;
обтекаемый блочный элемент
Ключевое слово display: inline-block
30.07.2015 в 15:14Чувак спасибо, подлечил.
13.08.2015 в 04:45Скажите, а ка Вы выровняли так кнопки соц сетей ? Можете рассказать !
26.12.2015 в 16:33Второй способ сработал и он просто офигенен
19.02.2017 в 00:01Спасибо за урок.
26.02.2017 в 05:26Есть еще один интересный способ (допер я до него сам, но думаю не я первый).
В общем у нас есть блок который надо поместить по центру.
1) Создаем еще два блока class=»left» и class=»right»(например) — один из них до главного блока, другой после (это важно)
2) Загоняем эти три блока в один блок, иначе при верстке может хрень получиться.
3) В CSS мы делаем следующее —
— даем всем трем блокам св-во float: left;
— главному блоку так же присваиваем width: 70%
— двум оставшимся по 15% ширины
4) Вуаля! Наш блок div встал идеально по центру.
P.S. Кстате, не забудте двум дополнительным блокам так же задать какую-нибудь ширину, а цвет фона такой же как и у основного фона.
На самом деле может показаться, что способ сложный, но это не так)
29.01.2018 в 23:49Оказалось всё так просто class=»ck-image-text-bottom__image»
04.06.2019 в 00:00.modal{
21.07.2019 в 02:37width:200px;
height:200px;
background:#CF000F;
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
Супер. 3 способ сработал. Автору респект!
17.09.2019 в 22:32Хороший сайт
06.02.2020 в 16:44