Because you're still viewing the page as a table. Once you stop doing this, you stop asking questions like these.
Now, you could give the object in question a width and simply give it margin-left/right: auto. That would center it in the width-less parent, but it wouldn't fix its position to the particular spot you're currently seeing it in.
For understanding, take it up to the highest level, the browser window. Make your browser 1024x768. Now make it bigger or larger - where is the "center"? It's moved depending on the size of the browser window.
If you have a parent whose width is variable, you can't center the child. The key is that, unlike years of using tables to hack up a website, the canvas CSS uses is variable; its height and width is undefined. Thinking of it like this, it makes perfect sense that center isn't used.
That's not exactly true. Every block element has a width, but inline objects do not. Furthermore, some block elements may have fixed widths, while others may be designed to take up as little as they require.
The "center" attribute that you describe would run counter to the visual formatting model of the standard that is in place to support a number of other things. That would mean that its behaviour would be next to impossible to design around if you were trying to account for all of your users screen sizes at the same time.
See here: http://www.w3.org/TR/REC-CSS2/visuren.html#containing-block
See, there's where we differ. I'd like to easily design a webpage that renders fine on 90% of my user's screens. I'd bet 90% of my users will be using personal computers, and use a resolution between 800x600 and 1920x1200. Want to look at my page on your non-iPhone? I'd love to introduce you to the m.mypage.com section of my site.
Something like "Center a child relative to a parent" isn't hard to do (we do it at work for our video game GUI), and it really seems like a few architecture astronauts got ahold of the CSS standards to cause these API usability problems.
Also, arguments like "You can't do that simple thing because.." are starting to sound like the arguments C++ pundits use to justify its monstrous complexity compared to C.
parent {}
child{ margin-left: auto; margin-right: auto; width: 100px; }
child{ center: horizontal; }
1a. child is 0px wide.
2. semantics: You're basically saying "Why isn't language x exactly like language y/how I want it to be?"
3. margin is what you're adjusting, so saying margin-auto makes sense.
4. Layers and layering are an important aspect of CSS, you've just broken all of them.
1. To the parent, the width of which is known by the layout code of the browser at any moment at 'runtime'.
1a. Fair enough, then it won't show up. But it will not-be-there centered, goddammit!! >:)
2. Which is a very fair question, and how languages get better.
3. That is one way to look at it, the one the language seems to force into you, and apparently it's the least intuitive.
4. If you can get an exactly equivalent effect with other expression, how come you can't have "center horizontally" just become an alias/shortcut/abstraction for that, if newbies expect it?
Then again, this is only an issue for hand-coded CSS. If you use your HTML/CSS as object code, this is easy enough to abstract in your generating code.
Bingo! And that's one reason Arc is pretty exciting. I'll be able to do the equivalent of center: horizontal, and the details can be abstracted.
You don't re-use the CSS, you re-use the HTML. That's the point. All it needs is a new style sheet, not a whole new webapge.