Как я могу центрировать контент между div верхнего и нижнего колонтитула?
В предыдущем вопросе я узнал, как сохранить div нижнего колонтитула внизу страницы. (посмотреть другой вопрос)
Теперь я пытаюсь вертикально центрировать контент между разделами верхнего и нижнего колонтитула.
так что у меня есть:
#divHeader
{
height: 50px;
}
#divContent
{
position:absolute;
}
#divFooter
{
height: 50px;
position:absolute;
bottom:0;
width:100%;
}
<div id = "divHeader">
Header
</div>
<div id = "divContent">
Content
</div>
<div id = "divFooter">
Footer
</div>
Я пробовал создать родительский div для размещения существующих 3 div и присвоить этому div вертикальное выравнивание: middle; но это ни к чему не приведет.
Ответы 4
Вам нужно либо установить height div, чтобы заполнить всю область содержимого, либо его координаты должны быть в центре. Что-то вроде top:50%; left:50%, но при этом div будет немного смещен в нижний правый угол.
% в марже относится к размеру контейнера, а не к элементу. Здесь вам нужно использовать абсолютный размер.
Может попробовать:
#divHeader
{
height: 50px;
}
#divContent
{
/*position:absolute;*/
width: 900px;
margin-left: auto;
margin-right: auto;
}
#divFooter
{
height: 50px;
position:absolute;
bottom:0;
width:100%;
}
Интересно, голосование отрицательное. По крайней мере, сначала расскажите причину, а затем проголосуйте против.
В CSS2:
html,body {height:100%;}
body {display:table;}
div {display:table-row;}
#content {
display:table-cell;
vertical-align:middle;
}
&
<body>
<div>header</div>
<div id = "content">content</div>
<div>footer</div>
</body>
http://codepen.io/anon/pen/doMwvJ
В старом IE (<= 7) вы должны использовать трюк с абсолютным позиционированием, о котором упоминал marxidad.
И в последних версиях браузеров вместо этого вы можете использовать flexbox.
Пожалуйста, посетите это еще раз. Он либо не работает, либо устарел. Если вы добавите цвет фона в верхний и нижний колонтитулы, очевидно, что это не работает так, как рекламируется.
добавить фон: красный; только в div заголовка, и вы увидите, что «контент» на самом деле НЕ центрируется, а просто находится непосредственно под большим заголовком. Кроме того, просто удалите vertical-align: middle и убедитесь, что это не имеет никакого эффекта, потому что на самом деле ничего не выровнено по вертикали. А для настоящего теста сделайте заголовок фактической высотой, например 20% от окна, как обычно, и убедитесь, что «контент» находится прямо под ним, а не по центру по вертикали между «заголовком» и «нижним колонтитулом».
@Suamere Понятно. Я исправил пример, добавив display:table-cell в #content.
Если добавить margin-top: -25%; маржа слева: -25%; это должно перецентрировать элемент.