Как разместить div по центру окна или блока

javascript, 20.02.2009 Пятница, 03:08
Теги: CSS, скрипт, верстка, Уроки
     Кроссбраузерно и быстро разместить div по центру окна браузера, это ещё одна часто сталкивающаяся с вами проблема. Я рассмотрю самые популярные способы разместить по центру div или любой другой контент. Этих способов три: css центрирование, табличное центрирование div и javascript центрирование. Все способы проверены в IE, Mozilla, Opera, Safari.

1) Простое центрирование div по центру экрана с помощью стилей css

     Css центрирование div - пожалуй самый популярный способ центрировать что либо в чем либо. Я покажу, как центрировать в середине экрана с помощью стилей обычный div блок красного цвета. Небольшая заметка: для стилевого центрирования необходимо знать точную высоту и ширину центрируемого блока!
     Для начала, если мы центрируем div по центру экрана, нам необходимо задать 100% высоту body. Сначала пропишем нашему div (для которого выполняем центрирование div) абсолютное позиционирование и параметры top и left равные 50%. Это уже центрирует его, но он будет смещен вправо и вниз на половину своей ширины и высоты. Это происходит от того, что точка, которая определяет координаты элемента, является его левым верхним углом. Угол то и оказался в центре. Именно для исправления этого нам и необходимо знать точную ширину и высоту нашего красного div. Назначаем нашему div левый и верхний отрицательный margin равный соответственно половине ширины и половине высоты нашего div. Div размещен по центру!
     Но у этого способа есть минус - при небольшом размере экрана div уедет за его края, а прокрутка не появится. Поэтому это не лучший метод. Два других метода помогут избежать эту ошибку. Код страницы с div, центрированным методом css:
Code
<!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">
<head>

<style>
html, body {height:100%;margin:0;}
#mydiv {background:red;width:100px;height:100px;margin:-50px 0 0 -50px;top:50%;left:50%;position:absolute;}
</style>

</head>
<body>

<div id="mydiv"></div>

</body>
</html>

2) Центрирование с помощью таблицы

     Этот метод, насколько я знаю, популярностью не пользуется, а зря! Единственный его минус - кода чуть больше чем в предыдущем методе, хотя и с этим можно поспорить. Плюсы способа - нет необходимости использовать абсолютное позиционирование, центрируемый div при небольшом размере экрана виден с прокруткой. Итак, в чем же способ состоит: сначала, как и во всех способах, body придается 100% высота. Затем создается 100% по ширине и высоте таблица с одной ячейкой. Я ячейке задаётся параметр align с значением center. Ну  затем в ячейку запихивается нужный контент. Вот код примера:
Code
<!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">
<head>

<style type="text/css">
html, body {height:100%;margin:0;}
#mydiv {background:red;width:100px;height:100px;}
</style>

</head>
<body>
<table style="height:100%;width:100%;">
<tr>
<td align="center">

<div id="mydiv"></div>

</td>
</tr>
</table>
</body>
</html>

3) Javscript центрирование div

     Не знаю, что может привести к использованию подобного метода... наверное тот фактор, что он прост как топор. Работает он в принципе так же, как и первый способ, только вычисления делает скрипт и сразу назначает нужный отступ в пикселях. Нет необходимости что либо делать самому. Вот пример подобного способа разместить div по центру:
Code
<!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">
<head>

<style>
html, body {height:100%;margin:0;}
#mydiv {background:red;width:100px;height:100px;}
</style>

</head>
<body>

<div id="mydiv"></div>

</body>
</html>

<script>
if (window.attachEvent){
  window.attachEvent('onresize',center);
  window.attachEvent('onload',center);
}else if(window.addEventListener){
  window.addEventListener('resize',center, false);
  window.addEventListener('load',center, false);
}
function center(){
  var i = document.getElementById('mydiv');
  i.style.marginTop = parseInt(document.body.offsetHeight-i.offsetHeight)/2+'px';
  i.style.marginLeft = parseInt(document.body.offsetWidth-i.offsetWidth)/2+'px';
};
</script>

Ну и в качестве бонуса... горизонтально div центрировать можно с помощью css стиля margin:0 auto;

Жми на пятую!
43, 55403
    © Блог StudioAD.ru 2024 год нашей эры. Не все права защищены... Копирование любой информации и материалов с обратной ссылкой приветствуется! Хостинг от uCoz.

    Если вам пришлись по душе материалы моего блога - подпишитесь на RSS дабы получать обновления незамедлительно! Я рад что вы читаете и комментируете мои экзерсисы, приятного времяпрепровождения.