Okay, I admit it - centering a table or div horizontally is not all that hard. But what about centering vertically? If you've tried this, chances are, you've found that it's not quite so simple, particularly on a page without much content. You think you're setting height - and yet, for some reason your element sticks to the top part of your page.
As it turns out, what you are centering in is not the whole browser viewport, but only the part that has content. And this means that your stuff gets stuck at the top. You therefore need your body and HTML to fill up 100% of what contains them - the browser viewport.
The only way I know of to get something to center vertically on a page is to work with several elements: HTML, body, a 100% sized table, and the item you want centered. Thus, I would code this way:
In the HTML for the above, #wrapper is to be applied to a single-cell table (not a div!) , and your #centereditem is inserted into that cell:
Click here to see the result. (In this case, I also added 5px padding to the #centereditem div, so that the text wouldn't run up against the edge.)
Note: if you don't want the page to collapse all the way to the edge of your centered item, you can add a margin to the item:
Special thanks to Gary White for his tutorial here.
Protect
your computer:
Click on the monitor for more info about a site.