Я пытаюсь центрировать div на своей странице.Он должен использовать только относительные значения, поэтому его размер зависит только от размера окна.
Я нашел решение, и оно центрирует прямоугольник, но кажется, что поле рассчитывается неправильно.Вместо этого размер body становится больше окна.В следующем примере firebug говорит мне, что поле #container имеет размер 1265x335 на моем экране.При проверке #content его размер составляет 506x134 и 2 пикселя с каждой стороны, что соответствует моим расчетам.Но верхнее поле составляет 316.
Я что-то не так понял?
Поле должно составлять 25% от 335, верно?
Как это исправить?
ВотHTML:
<body>
<div id="container">
<div id="content">
nothing...
</div>
</div>
</body>
А вот CSS:
html {
height: 100%;
}
body {
height: 100%;
margin: 0em 0em 0em 0em;
}
#container {
height: 100%;
}
#content {
text-align: center;
width: 40%;
height: 40%;
margin-top: 25%;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
border: 2px solid black;
}