Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to y(vertically) center body. Re: How to y(vertically) center body.

#137089
darcher
Member

There are a few ways to do it, it’s definitely one of the overlooked things of design. Vertical alignment is shaky at best.

The best results I’ve turned are from using a setup similar to this:

body {display:table;height:100%;width:100%;}
header,main,footer{display:table-row;width:100%;}
main {height:80%}
header,footer {height:10%}

At this point you could set vertical alignment as all height is set in the parent elements. Gets rather wonky if you attempt to have a responsive design site, so I suggest using progressive enhancement with block and inline-block level elements first then transitioning to the table method with media queries.