/* Stylesheet to center a box on a page */
/* Holly hack time - prevents IE's peekaboo bug */
/* Hides from IE5-mac \*/
* html DIV {height: 1%;}
/* End hide from IE5-mac */
body, html {
height: 100%;
border-width: 0px;
}
#outer { /* Works in all browsers */
height: 100%;
width: 100%;
overflow: visible; /* ... or without overflow */
}
#outer[id] { /* Ignored by IE */
display: table;
position: static;
}
#middle { /* Works in all browsers, but only needed by IE */
position: absolute;
top: 50%;
}
#middle[id] { /* Ignored by IE */
display: table-cell;
vertical-align: middle;
position: static;
}
#inner { /* Works in all browsers, but only needed by IE */
position: relative;
top: -50%;
}
/*
PLEASE NOTE: This CSS only takes care of the tough task of centring content VERTICALLY on a page.
The relatively easy task of centring the content HORIZONTALLY, if desired, is not done here. So,
The 'inner' DIV is not centred horizontally by default (maybe you didn't want it to be...)
To centre content in the 'inner' DIV horizontally, you'll want to add this sort of styling:
For an image:
For a fixed 695px width container of content:
Centred text in a fixed-width DIV!
ALSO NOTE: This will work in all browsers *except* IE7, unless IE7 is forced into quirks mode. You
can do this by putting a comment in front of the document's DOCTYPE declaration on the page. So, this
code will force IE7 into quirks mode if the page begins with it:
[... rest of page ...]
*/
