Home › Forums › CSS › How to y(vertically) center body. › Re: How to y(vertically) center body.
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.