Как разместить div по центру окна или блока
javascript, 20.02.2009 Пятница, 03:08
Теги:
Теги:
Кроссбраузерно и быстро разместить 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:
2) Центрирование с помощью таблицы
Этот метод, насколько я знаю, популярностью не пользуется, а зря! Единственный его минус - кода чуть больше чем в предыдущем методе, хотя и с этим можно поспорить. Плюсы способа - нет необходимости использовать абсолютное позиционирование, центрируемый div при небольшом размере экрана виден с прокруткой. Итак, в чем же способ состоит: сначала, как и во всех способах, body придается 100% высота. Затем создается 100% по ширине и высоте таблица с одной ячейкой. Я ячейке задаётся параметр align с значением center. Ну затем в ячейку запихивается нужный контент. Вот код примера:
3) Javscript центрирование div
Не знаю, что может привести к использованию подобного метода... наверное тот фактор, что он прост как топор. Работает он в принципе так же, как и первый способ, только вычисления делает скрипт и сразу назначает нужный отступ в пикселях. Нет необходимости что либо делать самому. Вот пример подобного способа разместить div по центру:
Ну и в качестве бонуса... горизонтально div центрировать можно с помощью css стиля margin:0 auto;
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>
<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>
<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>
<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;
