# Cool CSS programming tip: center any object horizontally AND VERTICALLY on a page
**URL:** https://boards.straightdope.com/t/cool-css-programming-tip-center-any-object-horizontally-and-vertically-on-a-page/327108
**Category:** Miscellaneous and Personal Stuff I Must Share
**Created:** [October 20, 2005, 5:21pm UTC](https://boards.straightdope.com/t/cool-css-programming-tip-center-any-object-horizontally-and-vertically-on-a-page/327108 "2005-10-20T17:21:41Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@Liberal](https://boards.straightdope.com/u/Liberal)
#### Post date: [October 20, 2005, 5:21pm UTC](https://boards.straightdope.com/t/cool-css-programming-tip-center-any-object-horizontally-and-vertically-on-a-page/327108/1 "2005-10-20T17:21:41Z")
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:
```auto
everything in here is centered — text, images, objects, whatever...
if there are multiple lines, the whole block of lines is centered
```
Note the negative (-50%) for the innermost div tag.
---
### Author:  [@Liberal](https://boards.straightdope.com/u/Liberal)
#### Post date: [October 21, 2005, 9:17am UTC](https://boards.straightdope.com/t/cool-css-programming-tip-center-any-object-horizontally-and-vertically-on-a-page/327108/2 "2005-10-21T09:17:57Z")
Mental note: discuss programming tips in some other forum. IMHO, maybe?..
---
### Author:  [@MackoUr](https://boards.straightdope.com/u/MackoUr)
#### Post date: [October 21, 2005, 9:40am UTC](https://boards.straightdope.com/t/cool-css-programming-tip-center-any-object-horizontally-and-vertically-on-a-page/327108/3 "2005-10-21T09:40:49Z")
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:
```auto
everything in here is centered — text, images, objects, whatever...
if there are multiple lines, the whole block of lines is centered
```
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.
---
### Author:  [@Liberal](https://boards.straightdope.com/u/Liberal)
#### Post date: [October 21, 2005, 9:55am UTC](https://boards.straightdope.com/t/cool-css-programming-tip-center-any-object-horizontally-and-vertically-on-a-page/327108/4 "2005-10-21T09:55:18Z")
Wow, thanks! (And sorry about the missing quotes.)
---
### Author:  [@MackoUr](https://boards.straightdope.com/u/MackoUr)
#### Post date: [October 21, 2005, 10:02am UTC](https://boards.straightdope.com/t/cool-css-programming-tip-center-any-object-horizontally-and-vertically-on-a-page/327108/5 "2005-10-21T10:02:35Z")
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.
---
### Author:  [@Liberal](https://boards.straightdope.com/u/Liberal)
#### Post date: [October 21, 2005, 10:13am UTC](https://boards.straightdope.com/t/cool-css-programming-tip-center-any-object-horizontally-and-vertically-on-a-page/327108/6 "2005-10-21T10:13:52Z")
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…)
---
### Author:  [@MackoUr](https://boards.straightdope.com/u/MackoUr)
#### Post date: [October 22, 2005, 4:10am UTC](https://boards.straightdope.com/t/cool-css-programming-tip-center-any-object-horizontally-and-vertically-on-a-page/327108/7 "2005-10-22T04:10:23Z")
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.