All geek questions in one place

How can I centralize the content between the div and the footer div?

In the previous question, I learned how to save the footer at the bottom of the page. ( see other questions )

Now I'm trying to vertically center the content between the div and the headers.

so i have:

#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>

I tried to create a parent div to place the existing 3 divs and assign the div div vertical-align: middle; but it doesn’t lead to anything.

+4
source share
4 answers

In 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

In old IE (<= 7), you should use the absolute positioning trick mentioned by Marxidad.

And in recent browsers, you can use flexbox instead .

+3
source

As an alternative, as far as I remember, you can use hacks such as this (more details here ).

+1
source

You need to either set the height div to fill the entire content area, or its coordinates should be in the center. Something like top:50%; left:50% top:50%; left:50% , but of course this will make the div a little lower on the right.

0
source

Perhaps try:

  #divHeader
 {
     height: 50px;
 }

 #divContent
 {
     / * position: absolute; * /
     width: 900px;
     margin-left: auto;
     margin-right: auto;
 }

 #divFooter
 {
     height: 50px;
     position: absolute;
     bottom: 0;
     width: 100%;
 }
-1
source

Source: https://habr.com/ru/post/1277774/

More articles:


All Articles