Forum Moderators: not2easy
I've just finished a small site which has a fixed height of 490px. The site is positioned in the centre horizontally but I would also like to position it in the center vertically.
How would I do this so it is positioned in the centre no matter what size of screen the user has?
Thanks.
Something like
<table height="100%"><tbody>
<tr><td> </td></tr>
<tr><td valign="middle">CONTENT</td></tr>
<tr><td> </td></tr>
</tbody></table>
The big question you need to answer first though is what do you want to happen if the viewport is smaller than the content ?
E.g.:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
height: 100%
}
body {
margin: 0 auto;
width: 770px;
min-height: 490px;
height: 100%;
position:relative;
}
#content {
position: absolute;
top: 50%;
margin-top: -245px; /* half the height */
background-color: red;
width: 100%;
height: 490px;
}
</style>
</head>
<body>
<div id="content">hello world</div>
</body>
</html>
I also centered in horizontally (that's what te width and the auto magind on body do.
To get this to work you need to create something (I used body) that's both 100% height of the viewport and has a minimal height of what you need. In addition you need to give that element position relative so that the abo#*$!ely positioned child uses it as a reference (and not the viewport -important should the viewport be too small)
The content itself is the absolutely positioned at halfway the height (top:50%) and the top is then moved back up by half the height (negative top margin).
That's basically all you need to get it working in FF, Safari, Opera, even IE (all latest versions).
Testing it in legacy IE versions left as an exercise to the reader (IE6 will have trouble with min-height, easiest is to throw in IE7.js )
This is probably a reason why so many think it's difficult to do. But the above should not break in a modern browser (it will in old IE versions I think, let us know if you can't figure out what to put in the conditional comments.)
There are in most likely other ways too.
The code above perfectly centered the div vertically in Firefox. How can I center it horizontally. I have tried
margin-left:auto; margin-right:auto;
Note again that legacy IE versions won't be fond of setting both sides.
What goes within the content?
Do the whole <body>all my div tags etc content</body> tag content go inside the CONTENT?
