Depends on what you want to center. If the content has dynamic height (like a block of text), then you would use CSS tables (
display: table and
display: table-cell) in conjunction with the
vertical-align: middle declaration. Due to Internet Explorer’s lack of support, you would have to misuse a
table element to vertically center such content in that browser.
If the content to be centered has a fixed or percentage‐based height, you can use absolute positioning. Internet Explorer doesn’t support the pure absolute positioning method; this may mean that you can’t center content with a percentage‐based height. I’ve never tested it. On the other hand, absolute positioning can be combined with negative margins and Internet Explorer
does support this:
CODE
/* two “div” elements, one nested inside the other */
/* you may be able to apply the negative margin to the outer “div” element and scrap the inner; I can’t recall */
/* negative top margin is exactly half the height */
div { position: absolute; top: 50%; width: 500px; height: 500px; }
div div { height: 100%; margin: -250px 0 0; }
Finally, to center a single line of text, you can use
line-height:
CODE
/* div contains one line of text */
div { height: 500px; line-height: 500px; }
| 