CSS: горизонтальное и вертикальное центрирование элемента в окне браузера.

Автор: Gennady

7 Фев

Наверняка это может когда-нибудь понадобится. Например при создании страницы-входа на сайт или формы авторизации для входа в какую-либо закрытую часть сайта. В этом случае очень хочется, чтобы элементы дизайна располагались бы в центре окна браузера как по горизонтали, так и по вертикали.

Для примера придумаем несложный HTML-код. Пусть это будет элемент DIV, внутри которого есть картинка и текст. Ну например вот такой:

<div id="example">
 <img src="http://myserver.ru/img/im1.png" alt="Это картинка" />
  А это просто текст слов...
</div>

Я не буду задавать какие-либо стили для элементов, находящихся внутри блока #example, ведь это только пример, а вот CSS-правило для этого блока разберем подробно.

#example {
  position:absolute;
  top:50%;
  left:50%;
  width:250px;
  height:200px;
  margin-left:-125px;
  margin-top:-100px;
  border:1px dotted red;
}

Я исхожу из того, что нам заранее известны ширина и высота центрируемого элемента. Ведь именно этими величинами мы попытаемся воспользоваться, чтобы центрировать элемент на в окне браузера (именно в окне браузера, а не на экране).

Задавая элементу #example абсолютное позиционирование, мы извлекаем его из нормального потока и имеем возможность поместить в любом месте страницы. Что мы и делаем, помещая верхний левый угол элемента в центр окна браузера, задавая свойствам top и left значения 50%.

Зная ширину (250px) и высоту (200px) элемента #example мы задаем свойствам margin-left и margin-top отрицательные значения, равные половине ширины и, соответственно высоты центрируемого элемента, заставляя его таким образом сдвинуться влево и вверх и занять место в центре окна браузера.

Свойство border добавлено лишь для наглядности.

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

Но все-таки для большинства задач это решение вполне подойдет.

В рубриках: css

(37 votes, average: 4.59 out of 5)

Loading ...

Отзывов (14) на «CSS: горизонтальное и вертикальное центрирование элемента в окне браузера.»

userfoenix 21.04.2008 в 13:04 1
Спасибо!!!! Я давно искал такой интересный и удобный сайт-справочник как у Вас! Очень впечетляет проведенная Вами работа. Спасибо огромное! Продолжайте работу. Я сам тепер займусь на досуге написанием похожего блога, благо тоже есть чем поделится
ПаЛыЧ 03.06.2008 в 16:09 2
А можно реализовать вот так
#example {
margin: auto;
width:250px;
height:200px;
border:1px dotted red;
}
Это создает поля до размеров экрана, а так как размеры блока указаны, соответственно тоже будет отцентрирован. При этом имеет место больше гибкости.
Gennady 03.06.2008 в 16:24 3
Ваш пример демонстрирует центрирование только по горизонтали, тогда как пример в статье центрирует содержимое и по горизонтали, и по вертикали. Да и margin: auto; например в Internet Explorer 5 не сработает…
ПаЛыЧ 03.06.2008 в 16:27 4
Думаю, что количеством пользователей ИЕ 5 можно пренебречь. И почему только по горизонтали? Ведь в данном случае атрибут margin отвечает за поля вокруг блока?
Gennady 03.06.2008 в 20:50 5
Про ie5 (равно как и про nn4) в общем согласен, правда с оговоркой: для ресурсов с высокой нагрузкой (ну, будем считать 100к хостов/сутки), примерно 0,5% пользователей с ie5 – это 500 человек…
А про margin:auto – просто испытайте свой же пример в том же ie6 или ff2. По горизонтали центрируется прекрасно, по вертикали – никак…
Gennady 02.09.2008 в 16:22 6
Да, и совсем упустил в статье. Нужно еще следующее:
html, body {
position:relative;
height:100%;
}
FXIX 18.09.2008 в 15:50 7
Body в стакан (position:relative;) не рекомендуется ставить. Лучшим решением как мне думается будут два дива – первый relative второй absolute.
Steven 10.11.2008 в 15:25 8
Это точно!

Спасибо автору за супер Блог.
IR 03.02.2009 в 1:07 9
Жаль, что не подходит когда высота блока меняется. Хочется сделать вертикальное центрирование на css для страницы если она не заполняет весь экран…
aka[Gamlet] 10.03.2009 в 14:45 10
Вертикальное выравнивание для норм. браузёров можно сделать и так, а если скажем необходимо отцентрировать div по вертикали то след. структура я думаю подойдет(использовано неправильная интерпретация высоты в IE)

Universal vertical center with CSS

.greenBorder {border: 1px solid green;}

ла ла ла и т.д п.п
aka[Gamlet] 10.03.2009 в 14:45 11
сори чет глюконуло выложу пост позже(
Александр 16.06.2009 в 10:08 12
Вот спасибо! Наконец-то нашёл то, чего искал. Всё популярно разжевано, осталось только проглотить. Спасибо, Gennady, всё работает!
F^[a].t 07.08.2009 в 15:46 13
не совсем подходит, попробуйте по изменять ширину окна. Результат не утешительный для тех кто хочет «совершенства»
SturmaN 14.04.2010 в 11:53 14
А если допустим у меня ширина дива известна (800px) а высота меняется в зависимости от контента. Как быть в таком случае?

На данный момент я использую это:
html {
height:100%;
}
body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#main {
display:table;
width:100%;
height:100%;
vertical-align:middle;
}
#cell {
display:table-cell;
vertical-align:middle;
}
#content {
display: block;
margin:0 auto;
width:800px;
position:relative;
}

Ну и соответственно html:

Центрируется и по вертикали и по горизонтали в идеале =))
Но насколько это правильно?