Мёртвый блог живого человека

SEO-оптимизация, манимейкинг, веб-разработка

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



Оставить комментарий

Подтвердите, что Вы не бот — выберите человечка с поднятой рукой:

Комментарии

  1. Самый простой и надежный, на мой взгляд смешанный:

    #wrap {
      width: 1000px;
      position: absolute;
      left: 50%;
      margin-left: -500px;
    }

    VA:F [1.9.22_1171]
    +31
    • использую метод, который описан в комменте от sman

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

      VA:F [1.9.22_1171]
      -14
      • Виктор Смищук

        Июль 14, 2011 в 17:12

        Я тоже

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

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

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

        А авт орские методы не подошли ((

        VA:F [1.9.22_1171]
        -18
    • Огромное спасибо за статью. Еще большее спасибо sman!! Самый крутой способ, который только встречал! теперь только его и использую!

      VA:F [1.9.22_1171]
      -13
    • Спасибо Огромное автору смешанного варианта, в моем случае вообще ничего не помогало и только смешанный вариант выручил! Спасибо!

      VA:F [1.9.22_1171]
      -16
    • К сожалению, в этом способе есть небольшой недочет, а именно:

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

      VA:F [1.9.22_1171]
      +1
      • тоже самое, блок сбежал с поля боя налево куда ему нельзя. Сработала такая конструевина :

        .bl09_dw{

        float: center;

        width: 98%;

        padding: 20px 10px 20px 10px;

        В тексте, где ширина рабочей области 900рх. Е плохо так смотрится )

        VA:F [1.9.22_1171]
        -10
  2. Спасибо автору за рецепты. Уже таблицами хотел делать(

    VA:F [1.9.22_1171]
    +6
  3. Спасибо чувак, оч помогло

    VA:F [1.9.22_1171]
    -12
  4. margin: auto; — не работает во многих браузерах и еще зависит о док тайпа.

    Проверенный способ — http://go.deadblog.ru/e

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

    VA:F [1.9.22_1171]
    +3
  6. Спасибо за совет, 1-ый точно самый удобный и простой

    VA:F [1.9.22_1171]
    +6
  7. left:50%;

    margin-left:-25%;

    VA:F [1.9.22_1171]
    -9
  8. left: 50%;

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

    position: absolute;

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

    VA:F [1.9.22_1171]
    -14
  10. Ребят, всё конечно хорошо, но у меня вопрос такой:

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

    VA:F [1.9.22_1171]
    +6
  11. Мне не подошел ни один вариант!!! А ещё есть:?

    VA:F [1.9.22_1171]
    +1
    • Мне не подошел ни один вариант!!! А ещё есть:?

      — У нас есть все размеры обуви, все цвета, все стили!

      Так почему Вам не подходит наша обувь?

      — У меня нет ног...

      VA:F [1.9.22_1171]
      +13
  12. left:50%; margin-left:-425px; где -425px это половина ширины выравнимаего по горизонтали блока

    VA:F [1.9.22_1171]
    -4
  13. Ни один метод не решает проблему с float внутри блока, если ширина блока заведомо не известна (например, меню).

    В таких случаях использую дополнительный блок, который обворачивает выравниваемый блок. Стиль примерно так:

    #dop-block{
        position: relative;
        float: right;
        right: 50%;
    }
    #block{
        position: relative;
        float: left;
        left: 50%;
    }

    VA:F [1.9.22_1171]
    +46
    • Спасибо ВИКТОРУ за подсказку!

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

      VA:F [1.9.22_1171]
      +2
    • Спасибо ВИКТОРУ за подсказку!

      Промучался час! Отличный сайт! :)

      VA:F [1.9.22_1171]
      -1
    • Спасибо!!)

      VA:F [1.9.22_1171]
      +4
    • Спасибо Виктору! Давно искал решение, наконец-то вот оно! )

      VA:F [1.9.22_1171]
      0
  14. Спасибо, автор очень выручил!

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

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

    а слоем выше основу сайта и чтоб скроллился ( основа у меня в html-таблице )

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

    .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; 
    }

    VA:F [1.9.22_1171]
    0
  15. Есть до боли простой способ... правда имеет один минус... но я им раньше все время пользовался.

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

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

    VA:F [1.9.22_1171]
    +5
  16. .center {
        position: relative;
        left: 50%; 
        margin-left: -50%;
    }

    VA:F [1.9.22_1171]
    -2
  17. Спасибо, чувак. Способ 2 спас!

    VA:F [1.9.22_1171]
    -2
  18. Спасибо большое, помогло!

    VA:F [1.9.22_1171]
    -1
  19. НЕ знаю, у меня никак не получается, или же через раз получается...

    VA:F [1.9.22_1171]
    -3
  20. Для выравнивания по-горизонтали этих способов должно хватить. Однако если у нас див-потомок имеет значение table-cell и стоит выравнивание по-вертикали, то не подходит ни один из перечисленных способов...

    VA:F [1.9.22_1171]
    +2
  21. у меня вопрос а если допустим страница прокручена вниз, и а див всплывающий все равно всегда должен быть по центру ? как быть?

    VA:F [1.9.22_1171]
    +3
  22. *{
    margin:0px;
    padding:0px;
    }
    CENTER{
    margin:0;
    padding:0;
    }
    .conteiner{
    width:900px;
    height:20px;
    margin:0;
    padding:0;
    position:relative;
    background:red;
    }

    VA:F [1.9.22_1171]
    -1
  23. Приветсвую всех! Помогите установить ротатор по центру так что бы картинка была почти во весь экран и отображалась на разных мониторах одинаково по центру.

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

    VA:F [1.9.22_1171]
    +2
  25. Не понимаю зачем все так усложнять, достаточно прописать

    text-align:center;

    и все дела.

    VA:F [1.9.22_1171]
    -11
  26. КРАСАВЧИК, автор этой статьи. Большое спасибо ему за статью.

    VA:F [1.9.22_1171]
    0
  27. помог способ Андрея, так как у меня как раз два блока. спасибо=)

    VA:F [1.9.22_1171]
    -1
  28. я на самом деле дико запутался. подскажите плиз-что нужно сделать, чтобы при изменении масштаба в браузере — блоки не съезжали в стороны.

    VA:F [1.9.22_1171]
    -2
  29. Спасибо. Дай вам Бог здоровья! Очень ценная информация. Только один способ сработал. И я его нашел здесь)))

    VA:F [1.9.22_1171]
    +6
  30. Добавил в закладки, спасибо!

    VA:F [1.9.22_1171]
    +4
  31. Действительно действующий способ, если вы верстаете div:

    «position:absolute;

    width:99.6%;

    text-align:center;»

    VA:F [1.9.22_1171]
    -4
  32. Народ, элемент div вообще-то поддерживает атрибут «align» (не css), позволяющий сделать выравние элемента по центру родительского элемента :D

    VA:F [1.9.22_1171]
    +4
  33. Способ 2 в IE 6 сразу помог, но появился горизонтальный скрол-бар. Пока не разобрался почему.

    VA:F [1.9.22_1171]
    +2
  34. Жаль на сайте ucoz не мог выравнять. Наверно стили под эту систему не идут.

    VA:F [1.9.22_1171]
    +1
  35. 4 сопосб ахрененный!!! Спасибо!

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

    VA:F [1.9.22_1171]
    -2
  36. Огромное спасибо! Долго не мог ничего придумать. Не знал про «auto».

    VA:F [1.9.22_1171]
    -2
  37. ну и где твоя «есть дюжина способов»?

    VA:F [1.9.22_1171]
    -5
  38. Здравствуйте!

    Как сделать четыре столбца в

    Роза.

    VA:F [1.9.22_1171]
    -4
  39. Здравствуйте!

    Как сделать четыре столбца в блоке див

    Роза.

    VA:F [1.9.22_1171]
    -3
  40. Спасибо за статью. Довольно часто прибегаю к ней. Отдельное спасибо за динамичное меню.

    VA:F [1.9.22_1171]
    +2
  41. Про способ 3 вообще забудьте, так как если кто-то зайдет с устройства у которого меньше разрешение чем сам блок, он будет просто на всю ширину и уедет за экран на минус, который вы задали...

    VA:F [1.9.22_1171]
    -6
  42. Первый способ прокатывает без нуля впереди

    margin: auto;

    VA:F [1.9.22_1171]
    +1
  43. Спасибо! Сработало.

    VA:F [1.9.22_1171]
    -3
  44. Виктору с комментариев огромное спасибо!

    VA:F [1.9.22_1171]
    -2
  45. Спасибо автору. Мне помог Способ 4. Использование дополнительного блока

    VA:F [1.9.22_1171]
    0
  46. margin: 0 auto; работает даже для блоков переменной длины, но для них должно быть выставлено display: table;

    VA:F [1.9.22_1171]
    +6
  47. еще можна использовать тег . Пример:

    ...

    ...

    ...

    VA:F [1.9.22_1171]
    -1
  48. Спасибо большое Виктору сработало отлично, 3 часа мучался.

    VA:F [1.9.22_1171]
    +2
  49. Не наркоторговец

    Сентябрь 12, 2014 в 20:50

    азазаза

    VA:F [1.9.22_1171]
    0
  50. Первый вариант реально самый лучший.

    VA:F [1.9.22_1171]
    0
  51. Выравнял навигацию в адаптивном шаблоне WP. 4 способ выручил! Спасибо огромное, ребята!

    VA:F [1.9.22_1171]
    0
  52. Питер Гриффин

    Апрель 18, 2015 в 18:12

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

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

      VN:F [1.9.22_1171]
      -1
    • О данном методе выравнивания блоков прочитал в этом блоге, о чем очень большое СПАСИБО автору! Постоянно его использую при разработке веб-сайтов. Свой отзыв с благодарностью я уже оставлял ранее.

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

      VA:F [1.9.22_1171]
      +1
  53. top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    margin: auto;

    VA:F [1.9.22_1171]
    0
  54. обтекаемый блочный элемент

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

    VA:F [1.9.22_1171]
    0
  55. ... :)

    VA:F [1.9.22_1171]
    0
  56. Чувак спасибо, подлечил.

    VA:F [1.9.22_1171]
    0
  57. Скажите, а ка Вы выровняли так кнопки соц сетей ? Можете рассказать !

    VA:F [1.9.22_1171]
    +2
  58. asd

    VA:F [1.9.22_1171]
    0
  59. Второй способ сработал и он просто офигенен

    VA:F [1.9.22_1171]
    0


Подпишись и будь вкурсе всех новых тем на блоге — узнаешь много нового!