Полное центрирование блока

Der neue Gesandte · January 28, 2010

Вроде все элеметарно...если позиционированый блок с фиксированым размерами, а если %, то возникает непонятной косяк при вертикальном центрировании. Собсна, хватит слов, вот код


body,html {
	height: 100%;
}

body {
	background: rgb(240,240,240);
	width: 100%;
	min-width: 1000px;
	max-width: 1600px;
	margin: 0 auto !important;
}

div.wrapper {
	background: rgb(255,255,255);
	width: 40%;
	height: 40%;
	position: fixed;
	top: 50%;
	left: 50%;
	/* margin-top: -10%; */ /* Opera, FF, IE */
	margin-top: -20%; /* Chrome */
	margin-left: -20%;
}		

	div.wrapper p {
		padding: 20px;
	}

<!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" xml:lang="ru" lang="ru">
<head>
	<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
	<title>Полное центрирование</title>
	<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head
<body>

<div class="wrapper">
	<p>Это что-то с чем-то в непонятном сочетаний чего-то с чем-то, но без чего-то.</p>
</div>

</body>
</html>

По логике, отрицательный маргин должен быть равен 20%, но это работает только в хроме, остальным же почему-то надо минус 10%...

Как лечить?

mini · January 31, 2010

а так не подойдет?

div.wrapper {

background: rgb(255,255,255);

width: 40%;

height: 40%;

top: 30%;

position:absolute;

left:30%;

}

Sign In

Полное центрирование блока

Question

Der neue Gesandte

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

mini

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information