Как отцентрировать “div” по вертикали и горизонтали?

13.09.09 / Категории Uncategorized | Оставить комментарий

Вариант без таблицы..
Но высоту div нужно будет задать.

1) задаем диву ширину и высоту.
height:200px;
width:400px;
2) задаем диву position:absolute;
left:50%; top:50%;
3) устанавливаем margin-top с отрицательным значением равным половине высоты, для margin-left отрицательное значение равное половине ширины.
margin-top:-200px;
margin-left:-100px;

это все.

полный код варианта 1

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
 * { padding:0px; margin:0px;}
 body { background:#000000;}
 #central { width:400px; height:200px; text-align:center; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-100px; background:#fff;}
 #central p { line-height:200px; font-family:Tahoma,arial; font-size:20px; color:#666666;}
</style>
</head>
<body>
 <div id="central">
  <p>Хехе я тут!</p>
 </div>
</body>
</html>

Вариант c таблицой..
Высоту div можно будет не задавать.

1) задаем диву ширину и margin для центрирования, (кстати для центрирования дива можно это использовать и в первом примере).
width:400px; margin:0 auto;
2) вокруг div делаем таблицу.. с одной строкой и одним столбцом.
таблице делаем ширину и высоту 100%
width:100%;
height:100%;
столбцу делаем ширину 100%, а высоту 99%
width:100%;
height:99%;
vertical-align:middle;
3) устанавливаем body и html высоту 100%
height:100%;

пришлось добавить лишнюю таблицу, но высоту можно теперь не задавать.

полный код варианта 2

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Вариант с таблицей</title>
<style type="text/css">
 * { padding:0px; margin:0px;}
 html { height:100%;}
 body { background:#000000; height:100%;}
 
 #verticaller { height:100%; width:100%; border-collapse:collapse;}
 #verticaller td { height:99%; width:100%; vertical-align:middle;}
 
 #central { width:400px; margin:0 auto; text-align:center;background:#fff;}
 #central p { line-height:50px; font-family:Tahoma,arial; font-size:20px; color:#666666;}
</style>
</head>
<body>
<table id="verticaller">
<tr>
 <td>
 <div id="central">
  <p>Хехе я тут!</p>
 </div>
 </td> 
</tr> 
</table> 
</body>
</html>

Скачать архив с примерами – centering-div

Вы можете сослаться на эту статью:
http://www.rantiev.com/block-centering/trackback/

← Веселая игрушенция
Как закрыть посты для комментирования.. которые остались со статусом “Allow comments on this post”? →

Комментарии

Оставить комментарий