So you have the root container of your application and want to center it on the screen (regardless of screen resolution). How do you do that in HTML? I use Dreamweaver CS5, so I thought the CSS code hinting would make this easy for me to figure out. "position" property? Nope. There is a "vertical-align" property, but not "horizontal-align" property. "float" property maybe? Nope. How about "display"? Nadda, again.
Finally after some google I found this and it worked:
So in essence a hack as I see it. The above CSS basically says take your container, makes it 1000 pixels wide, position it as 50% from the left border and then goes back 500 pixels (always half of the container's width) in the left direction. Basically it is doing a mathematical calculation for you. In 2010, shouldn't things be easier for you than this?
The equivalent in Flex you ask? If your container is nested within a Canvas, just set the horizontalCenter like so:
Simplicity. I love it. And in the case that the parent was a non-Canvas type container, then you could use:
Again, simplicity. You know just but looking at either one of those lines what the positioning of child elements is going to be.
The conclusion here is not to say that I don't want to learn, or that I am being lazy. Neither that a simple math calculation is beyond my abilities. It's to say that it is not intuitive! We use the word intuitive when talking about a user using a UI for the first time, how easy it is to figure out how to perform some task; well same goes for developers. In Flex it is easy to figure out how to position elements within a container, in HTML it is not so easily apparent.
Another one is the CSS "float" property. Allows you to push elements to the right or left. But top and/or bottom? No idea, haven't discovered that one yet :)
P.S.: Don't ever use the HTML <center> tag to center elements...it doesn't just center its immediate children, but children of children as well. Don't ask me what algorithm it uses!