Выравнивание блоков div по центру (css, div html).

В данной статье я расскажу, как поместить блок div по центру. Способов существует множество, но далеко не все позволяют сделать именно то, что требуется. Я приведу в пример самые лучшие и простые способы.

Выравнивание 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%;
}

Комментарии (72):

  1. sman Ответить

    Самый простой и надежный, на мой взгляд смешанный:
    #wrap {
    width: 1000px;
    position: absolute;
    left: 50%;
    margin-left: -500px;
    }

    19.11.2009 в 17:37
    • Светлана Ответить

      использую метод, который описан в комменте от sman

      а из приведеныых автором больше всего понравился процентный. он все же логичнее, чем через margin, имхо

      08.03.2010 в 01:31
      • Виктор Смищук

        Я тоже

        использую метод, который описан в комменте от sman

        а из приведеныых автором больше всего понравился процентный. он все же логичнее, чем через margin, имхо

        Я тоже использую его метод. Не знаю правда как, но он работает )
        А авт орские методы не подошли ((

        14.07.2011 в 17:12
      • Алесандр

        фиксированная ширина и пожишн абсолют, не всегда хорошо…

        28.08.2014 в 08:27
    • xlazex Ответить

      Огромное спасибо за статью. Еще большее спасибо sman!! Самый крутой способ, который только встречал! теперь только его и использую!

      09.10.2011 в 10:33
    • Looler Ответить

      Спасибо Огромное автору смешанного варианта, в моем случае вообще ничего не помогало и только смешанный вариант выручил! Спасибо!

      01.02.2013 в 04:09
    • Константин Ответить

      К сожалению, в этом способе есть небольшой недочет, а именно:
      Если страницу сузить так, что она станет уже, чем блок (окно браузера решили уменьшить по горизонтали), то начало блока уйдет за левую границу страницы. Кому это не страшно — способ подходит на ура.

      17.10.2013 в 21:01
      • Юрий

        тоже самое, блок сбежал с поля боя налево куда ему нельзя. Сработала такая конструевина :
        .bl09_dw{
        float: center;
        width: 98%;
        padding: 20px 10px 20px 10px;
        В тексте, где ширина рабочей области 900рх. Е плохо так смотрится )

        18.03.2014 в 22:03
      • 3axap

        параметр float со значением center не бывает

        31.01.2019 в 20:40
    • Фишер Ответить

      Говеннее способа я еще не видел, бери margin:0 auto и не е*и мозг w3.org

      28.02.2019 в 03:23
  2. Александр Ответить

    Спасибо автору за рецепты. Уже таблицами хотел делать(

    21.12.2009 в 02:27
  3. Артем Ответить

    Спасибо чувак, оч помогло

    13.03.2010 в 07:06
  4. Kas Ответить

    margin: auto; — не работает во многих браузерах и еще зависит о док тайпа.

    21.06.2010 в 13:33
  5. Zverokoder Ответить

    Все отлично, когда ширина центрируемого блока фиксирована, будь то в процентах или в пиксах. А вот отцентрируйте мне блок с шириной ауто )) С помощью марджин. Увы-увы марджин не справляеться. Предлогайте варианты гуру. Я пользу два вложеных блок с позиционированием 50% и — 50%. Эффект «слайдинг дорс»

    12.07.2010 в 14:25
  6. Сергей Ответить

    Спасибо за совет, 1-ый точно самый удобный и простой

    29.01.2011 в 16:02
  7. Элвис Ответить

    left:50%;
    margin-left:-25%;

    02.04.2011 в 17:14
  8. Элвис Ответить

    left: 50%;
    margin-left: половина ширины дива;
    position: absolute;

    02.04.2011 в 17:22
  9. Максим Ответить

    Спасибо за советы. Помучался с настройкой div с помощью margin… И поставил нормальный table — результат: работает и отображается во всех браузерах НОРМАЛЬНО и ОДИНАКОВО!!! Так что не заморачивайтесь с div.

    16.04.2011 в 00:43
  10. Lom Ответить

    Ребят, всё конечно хорошо, но у меня вопрос такой:
    Вот я имею несколько div блоков с float:left; , они все находятся на одной высоте. Как мне сделать так, чтоб при растягивании экрана, расстояния между ними тоже пропорционально растягивались?

    01.05.2011 в 16:17
  11. dj Tiesto Ответить

    Мне не подошел ни один вариант!!! А ещё есть:?

    01.07.2011 в 11:45
    • I.CaR® Ответить

      Мне не подошел ни один вариант!!! А ещё есть:?

      — У нас есть все размеры обуви, все цвета, все стили!
      Так почему Вам не подходит наша обувь?
      — У меня нет ног…

      04.11.2011 в 09:05
  12. tarantino Ответить

    left:50%;
    margin-left:-425px;
    где -425px это половина ширины выравнимаего по горизонтали блока

    19.07.2011 в 13:29
  13. Виктор Ответить

    Ни один метод не решает проблему с float внутри блока, если ширина блока заведомо не известна (например, меню).
    В таких случаях использую дополнительный блок, который обворачивает выравниваемый блок. Стиль примерно так:[css]#dop-block{
    position: relative;
    float: right;
    right: 50%;
    }
    #block{
    position: relative;
    float: left;
    left: 50%;
    }[/css]

    08.08.2011 в 15:56
    • Андрей Ответить

      Спасибо ВИКТОРУ за подсказку!

      Как раз флоат и как раз менюшка, мало того что не известно размер блока/картинки, так еще неизвестно сколько будет этих блоков/картинок. А данный метод как раз подходит для ВЫРАВНИВАНИЯ МЕНЮ по центру!!!

      13.08.2012 в 23:45
    • Artem Ответить

      Спасибо ВИКТОРУ за подсказку!
      Промучался час! Отличный сайт! 🙂

      03.03.2013 в 18:58
    • Илья Ответить

      Спасибо!!)

      24.10.2013 в 00:21
    • Юрий Ответить

      Спасибо Виктору! Давно искал решение, наконец-то вот оно! )

      30.10.2013 в 13:50
  14. AlexB Ответить

    Спасибо, автор очень выручил!

    помог 3 Способ, предыдущие не то делали.

    я хотел сделать Картинку как фон, чтобы всегда была по центру и fixed.(потому что на background у меня уже стоит image)
    а слоем выше основу сайта и чтоб скроллился ( основа у меня в html-таблице )

    Вышло так как нужно, и таблица в центре и рисунок в центре под таблицей, и любой блок который добавляю также можно ставить в центр в любой слой.

    [css].IMAGE{
    left: 50%;
    margin-left: -500px;
    position: fixed;
    width: 1000px;
    z-index:1;
    }

    .TABLE{left: 50%;
    margin-left: -500px;
    position: absolute;
    width: 1000px;
    border:0;
    top:10px;
    z-index:2;
    }[/css]

    24.08.2011 в 18:34
  15. Денис Ответить

    Есть до боли простой способ.. правда имеет один минус.. но я им раньше все время пользовался.
    Это двойной тег div.. из минусов что нужно ставить 2 тега див, из плюсов то что работает везде и подходит всем и всегда.

    Содержимое блока

    28.08.2011 в 08:58
  16. fish9370 Ответить

    [css].center {
    position: relative;
    left: 50%;
    margin-left: -50%;
    }[/css]

    07.09.2011 в 14:31
  17. Антон Ответить

    Спасибо, чувак. Способ 2 спас!

    12.11.2011 в 18:48
  18. Паша Ответить

    Спасибо большое, помогло!

    15.01.2012 в 01:06
  19. Tomich Ответить

    НЕ знаю, у меня никак не получается, или же через раз получается…

    29.02.2012 в 23:27
  20. ghost Ответить

    Для выравнивания по-горизонтали этих способов должно хватить. Однако если у нас див-потомок имеет значение table-cell и стоит выравнивание по-вертикали, то не подходит ни один из перечисленных способов…

    11.03.2012 в 11:08
  21. chupakabra Ответить

    у меня вопрос а если допустим страница прокручена вниз, и а див всплывающий все равно всегда должен быть по центру ? как быть?

    04.05.2012 в 11:10
  22. Roman Ответить

    [css]*{
    margin:0px;
    padding:0px;
    }
    CENTER{
    margin:0;
    padding:0;
    }
    .conteiner{
    width:900px;
    height:20px;
    margin:0;
    padding:0;
    position:relative;
    background:red;
    }[/css]

    07.05.2012 в 19:11
  23. Максим Ответить

    Приветсвую всех! Помогите установить ротатор по центру так что бы картинка была почти во весь экран и отображалась на разных мониторах одинаково по центру.

    22.05.2012 в 14:52
  24. Szen Ответить

    В IE первый метод не сработает, если странице прописан доктайп. В этом случае родительскому элементу выравниваемого блока нужно задать свойство text-align: center;

    14.06.2012 в 23:47
  25. rodatam Ответить

    Не понимаю зачем все так усложнять, достаточно прописать

    text-align:center;

    и все дела.

    20.06.2012 в 23:50
  26. vadyan Ответить

    КРАСАВЧИК, автор этой статьи. Большое спасибо ему за статью.

    10.08.2012 в 20:24
  27. Олеся Ответить

    помог способ Андрея, так как у меня как раз два блока. спасибо=)

    19.08.2012 в 00:06
  28. Олег Ответить

    я на самом деле дико запутался. подскажите плиз-что нужно сделать, чтобы при изменении масштаба в браузере — блоки не съезжали в стороны.

    25.08.2012 в 17:03
  29. Олесь Ответить

    Спасибо. Дай вам Бог здоровья! Очень ценная информация. Только один способ сработал. И я его нашел здесь)))

    11.09.2012 в 00:16
  30. Alexandr Ответить

    Добавил в закладки, спасибо!

    10.01.2013 в 01:36
  31. miha_timofeev Ответить

    Действительно действующий способ, если вы верстаете div:
    «position:absolute;
    width:99.6%;
    text-align:center;»

    23.01.2013 в 19:14
  32. Илья Ответить

    Народ, элемент div вообще-то поддерживает атрибут «align» (не css), позволяющий сделать выравние элемента по центру родительского элемента 😀

    24.01.2013 в 23:17
    • Nub Ответить

      Илья!!!! Спасибо!!! Гениально!)))

      26.11.2013 в 01:35
  33. Роман Ответить

    Способ 2 в IE 6 сразу помог, но появился горизонтальный скрол-бар. Пока не разобрался почему.

    12.04.2013 в 19:10
  34. Дмитрий Ответить

    Жаль на сайте ucoz не мог выравнять. Наверно стили под эту систему не идут.

    30.07.2013 в 19:16
  35. Nastya Ответить

    4 сопосб ахрененный!!! Спасибо!
    Вы себе не представляете на сколько помогли! О_О

    03.09.2013 в 17:47
  36. Богдан К Ответить

    Огромное спасибо! Долго не мог ничего придумать. Не знал про «auto».

    27.09.2013 в 07:23
  37. 1 Ответить

    Спасибо за статью. Довольно часто прибегаю к ней. Отдельное спасибо за динамичное меню.

    16.11.2013 в 05:14
  38. Кирилл Ответить

    Про способ 3 вообще забудьте, так как если кто-то зайдет с устройства у которого меньше разрешение чем сам блок, он будет просто на всю ширину и уедет за экран на минус, который вы задали….

    19.12.2013 в 14:32
  39. Мартин Ответить

    Первый способ прокатывает без нуля впереди
    margin: auto;

    22.12.2013 в 02:03
  40. forekko Ответить

    Спасибо! Сработало.

    16.01.2014 в 09:33
  41. Богдан Ответить

    Виктору с комментариев огромное спасибо!

    06.02.2014 в 23:01
  42. Жаслан Ответить

    Спасибо автору. Мне помог Способ 4. Использование дополнительного блока

    04.03.2014 в 14:36
  43. Юрий Ответить

    margin: 0 auto; работает даже для блоков переменной длины, но для них должно быть выставлено display: table;

    18.03.2014 в 15:41
  44. Николай Ответить

    Спасибо большое Виктору сработало отлично, 3 часа мучался.

    06.09.2014 в 03:30
  45. Алексей Ответить

    Первый вариант реально самый лучший.

    25.10.2014 в 19:32
  46. Максим Ответить

    Выравнял навигацию в адаптивном шаблоне WP. 4 способ выручил! Спасибо огромное, ребята!

    15.03.2015 в 07:17
  47. Питер Гриффин Ответить

    Статья ни о чём вообще не говорит. Пишете ради заработка, а не ради людей. Никто не против вашего заработка, но бредятину то зачем выкладывать? Только время чужое тратите…

    18.04.2015 в 18:12
    • ref Ответить

      Статья о том, как выровнять div по центру — об этом она и говорит. Какой из способов не помог тебе выровнять div по центру? Где тут бредятина? Другие комментарии ты читал, где люди советуют свои способы, где благодарят за работающие способы?

      18.04.2015 в 23:09
    • Николай Ответить

      О данном методе выравнивания блоков прочитал в этом блоге, о чем очень большое СПАСИБО автору! Постоянно его использую при разработке веб-сайтов. Свой отзыв с благодарностью я уже оставлял ранее.
      А вот на счет «бредятины», то надо на себя посмотреть Питер и задать вопрос самому-себе, а тем ли я в жизни занимаюсь и может разработка сайт это не мое. И больше успехов можно было достичь например в вязании или пении — это к примеру…

      19.04.2015 в 00:47
  48. Максим Ответить

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;

    09.05.2015 в 12:10
  49. Олег Ответить

    обтекаемый блочный элемент

    Ключевое слово display: inline-block

    30.07.2015 в 15:14
  50. Yol Ответить

    Чувак спасибо, подлечил.

    13.08.2015 в 04:45
  51. Даниил Ответить

    Скажите, а ка Вы выровняли так кнопки соц сетей ? Можете рассказать !

    26.12.2015 в 16:33
  52. Николай Ответить

    Второй способ сработал и он просто офигенен

    19.02.2017 в 00:01
  53. Андрей Ответить

    Спасибо за урок.

    26.02.2017 в 05:26
  54. Андрей Ответить

    Есть еще один интересный способ (допер я до него сам, но думаю не я первый).
    В общем у нас есть блок который надо поместить по центру.
    1) Создаем еще два блока class=»left» и class=»right»(например) — один из них до главного блока, другой после (это важно)
    2) Загоняем эти три блока в один блок, иначе при верстке может хрень получиться.
    3) В CSS мы делаем следующее —
    — даем всем трем блокам св-во float: left;
    — главному блоку так же присваиваем width: 70%
    — двум оставшимся по 15% ширины
    4) Вуаля! Наш блок div встал идеально по центру.

    P.S. Кстате, не забудте двум дополнительным блокам так же задать какую-нибудь ширину, а цвет фона такой же как и у основного фона.

    На самом деле может показаться, что способ сложный, но это не так)

    29.01.2018 в 23:49
  55. Антон Ответить

    Оказалось всё так просто class=»ck-image-text-bottom__image»

    04.06.2019 в 00:00

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *