выровнять div с плавающей высотой по центру

Garnet · October 12, 2010

Здравствуйте. Столкнулся с такой проблемой - требуется разместить div с плавающей высотой по центру экрана... погуглил, и в основном предлагают решение через display:table-cell; vertical-align:middle; у родителя, но вот как не пробовал биться головой об стенку у меня это не работает. Вот код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>div</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style type="text/css">
body {
	padding:0;
	margin:0;

}
.wrapper {
	width:100%;
	height:100%;
	position:absolute;
	background-color:#3FC;
	display:table-cell;
	vertical-align:middle;
}
.center_block {width:400px; margin:auto; 
	background-color:#FC3;
}
</style>
</head>
<body>
<div class="wrapper">
  <div class="center_block">content content content content content content content content content content content content content content content content content content content content content 
  </div>
</div>
</body>
</html>

Edited October 12, 2010 by Garnet

swetlana · October 12, 2010

ну для начала position:absolute тут ни к чему.

Затем: высота 100% — от чего?

родительский элемент в данном случае body, а ему высота не задана. Когда для body высота не задана, она определяется автоматически по высоте содержимого.

В вашем же случае для body нужно также задать высоту 100%.

И ещё момент: table-cell в чём должен жить? Правильно, в table. Значит для ожидаемой работы и для body нужно задать display: table.

Тогда будет работать как задумано.

В случае, когда высота задаётся не в процентах, а в абсолютных величинах, всё проще, и ваш вариант кода должен сработать.

Garnet · October 12, 2010

swetlana - спасибо, всё верно, ещё в body помимо высоты 100% надо добавить ширину 100%, а то wrapper прижимается к левому краю, и не хочет растягиваться на весь экран. С процентами кстати тоже работает. Вот код css, если кому надо:

body {
	height:100%;
	width:100%;
	padding:0;
	margin:0;
	display:table;
}
.wrapper {
	width:100%;
	height:100%;
	background-color:#3FC;
	display:table-cell;
	vertical-align:middle;
}
.center_block {
	width:400px;
	background-color:#FC3;
	margin:auto;
}

Edited October 12, 2010 by Garnet

Garnet · October 13, 2010

Кстати в IE так и не заработало, т.к. там vertical-align только для таблиц, через expression тоже не получилось... Короче сделал таблицей и забыл.

Great Rash · October 13, 2010

http://forum.htmlbook.ru/index.php?showtopic=19320

Sign In

выровнять div с плавающей высотой по центру

Question

Garnet

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

swetlana

Link to comment

Share on other sites

Garnet

Link to comment

Share on other sites

Garnet

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information