Cool CSS programming tip: center any object horizontally AND VERTICALLY on a page

Miscellaneous and Personal Stuff I Must Share
1

I’m probably the last person on earth to discover this, but just in case I thought I’d share. If you’ve ever wrestled with VALIGN, especially in Explorer, you know that it’s a waste of time. It doesn’t actually align things with their containers, but with the line they’re on.

This code works in Explorer. I don’t know about other browers:



<div style = "position: relative; height: 100%; width: 100%">
   <div style = "position: absolute; top: 50%; left: 50%>
      <div style = "position: relative; top: -50%; left: -50%>
         everything in here is centered — text, images, objects, whatever...
         if there are multiple lines, the whole block of lines is centered
      </div>
   </div>
</div>

Note the negative (-50%) for the innermost div tag.

2

Mental note: discuss programming tips in some other forum. IMHO, maybe?..

3

It works in Firefox as well, but you have a slight error in the code you posted. You left off the end quotes in two of the style attributes.

Corrected:



<div style = "position: relative; height: 100%; width: 100%">
   <div style = "position: absolute; top: 50%; left: 50%">
      <div style = "position: relative; top: -50%; left: -50%">
         everything in here is centered — text, images, objects, whatever...
         if there are multiple lines, the whole block of lines is centered
      </div>
   </div>
</div>

I’ve got a couple more browsers at work (Opera and Safari) plus some older versions of browsers; I’ll test it with those and let you know how it works.

Now the kid is back to sleep and dad can do so as well. Goodnight.

4

Wow, thanks! (And sorry about the missing quotes.)

5

Haven’t quite gone to bed (The kid started having another nightmare; no more strawberry milk for him before bedtime.)

Found a quirk. I put about sixty lines of text in the box so the text overruns the browser height.

In Firefox:

It starts with the first line of text halfway down the page and the rest runs down past the bottom of the window frame. When I scroll down it ends at the bottom of the window.

In IE:

The first line of text is at the top of the window but there is white space at the bottom after you scroll down.

The above probably isn’t the clearest description of what I’m seeing, but try it yourself.

Oh, and in the interests of science: I’m using Firefox 1.04 and Explorer 6.0.

6

Good catch. It really is intended for centering things on a page where everything fits. Common tasks, for example, might include centering a flash presentation, or a streamed movie, or an image.

(Still, it might be possible to tinker with the overflow attributes…)

7

Didn’t get to try it with the other browsers at work - too busy. I’ll have to load some on to the laptop this weekend and give it a spin.

It’s an interesting effect - suitable, like you note, for centering animations and such. I printed it out and slipped into my big notebook of code. The website I’m building at work is pretty dry (it would make Jakob Nielsen proud) so I can’t use it right away.