Илья Кригоузов Привет, меня зовут Илья Кригоузов и я занимаюсь информационными технологиями с 2005 года. Под такими технологиями я понимаю довольно широкий круг вещей: сайты любой сложности, базы данных и клиент-серверные приложения.
Закончил МИРЭА по специальности «инженер-математик», практику проходил на концерне радиостроения ОАО «Вега».Работаю в Информационных системах для бизнеса, так же сотрудничал с АйТи-агенством.
В свободное время увлекаюсь фотографией. Найти меня вы можете:

12 января 2008 г.

как выровнять DIV по центру

Очень часто возникает необходимость выровнять DIV-блок по центру по ширине или одновременно по ширине и высоте. Можно найти много разных вариантов, но почти все они не кроссбраузерные. Я предлагаю вам действительно кроссбраузерный способ выравнивания DIV-блока по ширине и по высоте, который будет работать под IE6+, Firfex 2+, Safari 3+ и Chrome. Наверняка будет работать где-нибудь еще, но мне нечем проверить.

Итак, берем пример, который покажет нам, как выровнять DIV-блок по центру по высоте и по ширине:
#ID_NAME {
   position: absolute;
   top: 50%;
   left: 50%;
   width: Xpx;
   height: Ypx;
   margin-left: -(X/2)px;
   margin-top: -(Y/2)px;
}

где X и Y - ширина и высота DIV-блока. Т.е. если у вас width 600px, то в margin-left вы должны написать -300px.

Единственный и весьма существенный недостаток — необходимо заранее знать размеры блока.

Посмотреть как это работает можно, например, здесь.

14 комментариев:

  1. Хороший способ. Я у себя в заметке написал больше способов выравнивания div по центру
    http://zodios.net/htmlcss/div-center.html

    ОтветитьУдалить
  2. Спасибо, очень помог, а то я ломал голову как поставить его по центру.

    ОтветитьУдалить
  3. Не помогает, если например высота блока 600 пикселей. То при просмотре сайта скажем на разрешении 1024*768 верз блока будет уходить за верхний край окна браузера...

    ОтветитьУдалить
  4. Не работает без параметра position: absolute;

    ОтветитьУдалить
  5. #data
    {
    max-width:1000px;
    margin:40px auto;
    }

    В IE 8.0.

    max-width:1000px; -не работает
    margin:40px-работает auto-не работает;

    ОтветитьУдалить
  6. Искал и вот оно что надо!!!!!!!!!!!
    Огромное спасибо!!!!!!!!!!

    ОтветитьУдалить
  7. Спасибо огромное! :)

    ОтветитьУдалить
  8. то, что надо, спасибо! в Опере 11.10 работает нормально

    ОтветитьУдалить
  9. +1 спасибо, то что надо! =)

    ОтветитьУдалить
  10. Наконец, действительно толковый совет. Спасибо автору.

    ОтветитьУдалить
  11. В точку! Спасибо

    ОтветитьУдалить
  12. работает только при фиксирваонной верстке. при резиновой не работает.

    если указывать не в пикеселях как нубы, а в процентах

    ОтветитьУдалить