Вертикальное центрирование блока средствами 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, но отступы от границы окна до того, что находится внутри блока по вертикали не будут одинаковыми, и отступы по горизонтали тоже, т.е. центрирование нарушится.
Учитывая провессионализм авторов сайта, на мой взгляд логичнее было бы объединить стили для body и html, с jnltkmysv cnbktv в бэкграунда для body. Но это так, мелочь, простите.
2005-10-09 at 4:12 am
да-да, действительно, ерунда какая-то… конечно, логично будет их объединить. спасибо.
2005-10-09 at 7:07 pm
Вопрос на засыпку:
Как тоже самое сделать относительно div, а не body если div имеет фиксированную высоту размером к примеру 200px.
2005-11-08 at 3:59 pm
Для 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>
2005-11-08 at 4:16 pm
Классная статья. Спасибо
2006-02-27 at 1:14 pm
мило ребята, только вот вы мне поясните вот какой момент – как отцентрировать по вертикале окно не зная заранее будет ли оно больше или меньше размера экрана? (js не предлагать, не изящно это).
2006-03-06 at 6:24 pm
Статья супер! спасибо!
2006-04-01 at 9:42 pm
плохое решение,
в том смысле, что я должен расчитывать высоту объекта и делить половину.
лучше делать с помощью vertical-align:middle;
но правда приходится извращаться, так как глюки будут зависеть от конкретного случая.
2006-04-15 at 8:12 pm
так ведь опера с прибором положила на вертикальное изменение размера окна..?
2006-05-13 at 7:10 am
ааа, на до position на relative заменить тогда все работает..
2006-05-13 at 7:11 am
А с каких пор это у нас заработал vertical-align? Что-то новенькое.
2006-05-23 at 11:47 am
Мне интересно а каким образом можно выровнять в стилях например такой код:
Карта сайтаФорум
Конкурсы
Спасибо!
2006-06-17 at 11:30 am
ещё раз )))
Карта сайтаФорум
Конкурсы
2006-06-17 at 11:32 am
вот блин))
щас уберу ссылки
Карта сайтаФорум
Конкурсы
2006-06-17 at 11:33 am
мдя) ну да ладно)
2006-06-17 at 11:34 am
К сожалению пример абсолютно не катит, если высота центрируемого дива превышает высоту видимой части в браузере. Иными словами, при высоте 500 в 800×600 получается фигня =( Хотя тож самое в 1600*1200 выглядело бы идеально
2006-07-27 at 5:33 pm
display:table-cell;vertical-align:middle;Для абсолютной высоты
На практике величины обычно относительны, приходится извращаться
2006-08-18 at 7:55 am
Guest, эта фишка в IE не пашет, а в Opera и FireFox идеально!
Что для IE посоветуешь?
2006-09-17 at 4:28 pm
Статья замечательная! Хотел задать вопрос:
Как можно сделать так: расположить два дива один над другим, у верхнего высота в 200px (например), а у нижнего на всю оставшуюся высоту?
Если поставить 100%, то появится полоса прокрутки, а это не труъ :)
2008-03-17 at 2:15 am
Статья классная, только я выровнить по центру не могу…как-то тяжело мне в CSS… Помогите пожалусто….
2008-03-25 at 7:23 pm
В IE vertical-align совсем плохо работает, если не сказать никак
оригинал примера работает и в IE и в вообще….
2008-07-08 at 11:56 am
а для центирования по горизонтали не проще ли написать margin:0 auto; м?
2008-07-31 at 4:52 pm
Спасибо за статью, однако предложеный спосов не решает задачу в Firefox 2.0 и MSIE 6.0
Точнее сказатьт, если размер окна больше размера блока – всё хорошо, но вот стоит сделать окно по горизонтали или вертикали так, чтобы блок не помещался полностью – и привет, верхний или левый край блока уезжает в отрицательную (невидимую) область. Для наглядности можно дать ему (блоку) border: 1px solid red; – видно, как он исчезает. Снизу и справа – всё хорошо.
2008-09-01 at 4:23 pm