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

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

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


<style type="text/css"><!--
html {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}
body {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	background:#000;
}
//--></style>


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

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

Предположим, что нам надо разместить на главной странице сайта flash-заставку шириной 300 пикселей и высотой 200 пикселей. Заключим ее внутрь элемента <div>. (X)HTML-код получится примерно таким:



<div id="Splash">
	<object.... и т.д.
        наш флэш-ролик
</div>

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


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

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


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">

<head>

<title>Positioning</title>

<style type="text/css"><!--
html {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}
body {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	background:#000;
}
div#Splash {
	background:#CCC;/* для наглядности */
	width:300px;
	height:200px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-100px;
	margin-left:-150px;
}
//--></style>

</head>

<body>

<div id="Splash">
	<object.... и т.д.
        наш флэш-ролик

</div>

</body>
</html>

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

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

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


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

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

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



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

  1. DBREX :

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


  2. Баранов Андрей :

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


  3. Konstantin :

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


  4. Баранов Андрей :

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

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

    HTML:
    <div id=”MainDiv”>
    <div id=”Centered”>

    </div>
    </div>


  5. locker :

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


  6. Crasher :

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


  7. Костя :

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


  8. nik :

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

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


  9. drwhite :

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


  10. drwhite :

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


  11. 2nik :

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


  12. Voron :

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

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

    Спасибо!


  13. Voron :

    ещё раз )))

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


  14. Voron :

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

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


  15. Voron :

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


  16. Basilio Cat :

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


  17. Guest :

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


  18. Romiz :

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

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


  19. hevil :

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

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


  20. Юля :

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


  21. Scramble :

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


  22. Евгений :

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


  23. Виктор :

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

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



22 queries 0.207 seconds.