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

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

Популярные записи:


79 комментариев на «“Выравнивание блоков div по центру (css, div html).”»

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

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

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

      • Я тоже

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    помог 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]

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

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

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

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

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

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

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

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

    text-align:center;

    и все дела.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  28. Ещё есть такой вариант, может кому-то пригодится:
    width: 660px;
    height: 60vh;
    left: calc(50% — 330px);
    top: calc(50% — 30vh);

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

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