Вертикальное центрирование блока средствами CSS

В статье "Горизонтальное центрирование блока средствами CSS" мы рассмотрели несколько способов центрирования блока по горизонтали. ?ногда бывает нужно отцентрировать блок еще и по вертикали, например flash-заставка на главной странице сайта или даже весь сайт в прямоугольнике фиксированного размера, размещенный всегда в центре окна браузера.

Без лишних слов перейдем сразу к делу. Для простоты эксперимента центрировать блок будем относительно элемента . Сперва устанавливаем ширину и высоту элемента, в котором разместим наш блок (это понадобится для любого элемента, в котором будем что-то центрировать), а затем еще обнулим значения отступов на случай, если у дожен быть какой-нибудь фон.

А теперь перейдем к главному и рассмотрим пару примеров.

У блока абсолютные значения ширины и высоты.

Предположим, что нам надо разместить на главной странице сайта flash-заставку шириной 300 пикселей и высотой 200 пикселей. Заключим ее внутрь элемента

. (X)HTML-код получится примерно таким: 



 

После чего опишем CSS-свойства этого блока:
 


div#Splash {
 background:#CCC;/* для наглядности */
 width:300px;
 height:200px;
 position:absolute;
 top:50%;
 left:50%;
 margin-top:-100px;
 margin-left:-150px;
}




Здесь мы указываем абсолютное позиционирование блока, левый верхний угол размещаем по центру окна, а затем смещаем блок вверх и влево с помощью отрицательных значений margin, которые равны половине высоты и ширины блока, соответственно. Полный код примера приведен ниже:






Positioning



 




Все очень просто и никаких громоздких таблиц!


У блока относительные значения ширины и высоты.


Второй пример отличается от предыдущего вычисляемыми значениями высоты и ширины блока. Понадобится ли это кому-то на практике — не знаю, но без этого статья была бы не полной. Отличительная особенность этого примера в том, что при изменении размеров окна изменяются соответственно и размеры блока, при этом он по прежнему остается в центре окна. В этом примере достаточно изменить несколько CSS-свойств у блока, остальной код оставим прежним:



div#Splash {
 background:#CCC;/* для наглядности */
 width:50%;
 height:50%;
 position:absolute;
 top:25%;
 left:25%;
}




На этот раз для позиционирования блока используем лишь координаты его левого верхнего угла. Вычитаем из общей высоты внешнего блока (в начале статьи решили что это будет ) высоту центрируемого блока (100% - 50% = 50%), делим ее пополам и получаем top:25%. Также поступаем с шириной и соответственно отступом слева (в примере: left:25%).


Остается добавить, если внутри нашего блока будет что-то фиксированного размера (например изображение), он и его содержимое будут центрироваться пока его размеры больше, либо равны размерам содержимого. Блок будет спозиционирован точно так, как мы ему указали в CSS, но отступы от границы окна до того, что находится внутри блока по вертикали не будут одинаковыми, и отступы по горизонтали тоже, т.е. центрирование нарушится.


Много комментариев (23) к “Вертикальное центрирование блока средствами CSS”

  1. DBREX :

    Учитывая провессионализм авторов сайта, на мой взгляд логичнее было бы объединить стили для body и html, с jnltkmysv cnbktv в бэкграунда для body. Но это так, мелочь, простите.


    2005-10-09 at 4:12 am
  2. Баранов Андрей :

    да-да, действительно, ерунда какая-то… конечно, логично будет их объединить. спасибо.


    2005-10-09 at 7:07 pm
  3. Konstantin :

    Вопрос на засыпку:
    Как тоже самое сделать относительно div, а не body если div имеет фиксированную высоту размером к примеру 200px.


    2005-11-08 at 3:59 pm
  4. Баранов Андрей :

    Для Konstantin:
    размеры свои подставьте, а код будет таким:

    CSS:
    div#MainDiv {
    height:200px;
    position:relative;
    }
    div#Centered {
    width:50%;
    height:50%;
    position:absolute;
    top:25%;
    left:25%;
    }

    HTML:



    …


    2005-11-08 at 4:16 pm
  5. locker :

    Классная статья. Спасибо


    2006-02-27 at 1:14 pm
  6. Crasher :

    мило ребята, только вот вы мне поясните вот какой момент – как отцентрировать по вертикале окно не зная заранее будет ли оно больше или меньше размера экрана? (js не предлагать, не изящно это).


    2006-03-06 at 6:24 pm
  7. Костя :

    Статья супер! спасибо!


    2006-04-01 at 9:42 pm
  8. nik :

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

    лучше делать с помощью vertical-align:middle;
    но правда приходится извращаться, так как глюки будут зависеть от конкретного случая.


    2006-04-15 at 8:12 pm
  9. drwhite :

    так ведь опера с прибором положила на вертикальное изменение размера окна..?


    2006-05-13 at 7:10 am
  10. drwhite :

    ааа, на до position на relative заменить тогда все работает..


    2006-05-13 at 7:11 am
  11. 2nik :

    А с каких пор это у нас заработал vertical-align? Что-то новенькое.


    2006-05-23 at 11:47 am
  12. Voron :

    Мне интересно а каким образом можно выровнять в стилях например такой код:

    Карта сайтаФорум
    Конкурсы

    Спасибо!


    2006-06-17 at 11:30 am
  13. Voron :

    ещё раз )))

    Карта сайтаФорум
    Конкурсы


    2006-06-17 at 11:32 am
  14. Voron :

    вот блин))
    щас уберу ссылки

    Карта сайтаФорум
    Конкурсы


    2006-06-17 at 11:33 am
  15. Voron :

    мдя) ну да ладно)


    2006-06-17 at 11:34 am
  16. Basilio Cat :

    К сожалению пример абсолютно не катит, если высота центрируемого дива превышает высоту видимой части в браузере. ?ными словами, при высоте 500 в 800×600 получается фигня =( Хотя тож самое в 1600*1200 выглядело бы идеально


    2006-07-27 at 5:33 pm
  17. Guest :

    display:table-cell;vertical-align:middle;Для абсолютной высоты
    На практике величины обычно относительны, приходится извращаться


    2006-08-18 at 7:55 am
  18. Romiz :

    Guest, эта фишка в IE не пашет, а в Opera и FireFox идеально!

    Что для IE посоветуешь?


    2006-09-17 at 4:28 pm
  19. hevil :

    Статья замечательная! Хотел задать вопрос:
    Как можно сделать так: расположить два дива один над другим, у верхнего высота в 200px (например), а у нижнего на всю оставшуюся высоту?

    Если поставить 100%, то появится полоса прокрутки, а это не труъ :)


    2008-03-17 at 2:15 am
  20. Юля :

    Статья классная, только я выровнить по центру не могу…как-то тяжело мне в CSS… Помогите пожалусто….


    2008-03-25 at 7:23 pm
  21. Scramble :

    В IE vertical-align совсем плохо работает, если не сказать никак
    оригинал примера работает и в IE и в вообще….


    2008-07-08 at 11:56 am
  22. Евгений :

    а для центирования по горизонтали не проще ли написать margin:0 auto; м?


    2008-07-31 at 4:52 pm
  23. Виктор :

    Спасибо за статью, однако предложеный спосов не решает задачу в Firefox 2.0 и MSIE 6.0

    Точнее сказатьт, если размер окна больше размера блока – всё хорошо, но вот стоит сделать окно по горизонтали или вертикали так, чтобы блок не помещался полностью – и привет, верхний или левый край блока уезжает в отрицательную (невидимую) область. Для наглядности можно дать ему (блоку) border: 1px solid red; – видно, как он исчезает. Снизу и справа – всё хорошо.


    2008-09-01 at 4:23 pm