The exercise was a little more than straight-up horizontal centering. It was to take two numbers randomly generated with possibly different number of digits, center them together along with an operator as a block, but right-align the text within. Also a text input field was put below. The line above the input field is just a simple border.
For reference, the CSS tutorial I looked at was http://www.noobcube.com/tutorials/html-css/horizontal-and-ve..., but I didn't add the IE elements because I thought it was only necessary for IE 6 and 7, not 9.
So the horizonal alignment problem in IE is probably because I used display:block. But why don't the numbers line up the same in chrome and firefox? What's up with the field border being all over the place? My point is not that I know html and css well, which I clearly don't, or that this stuff is impossible. It's that even with the latest browsers and techniques, it's still easy to get very different displays. I just didn't expect that, given the huge hype surrounding html5 and css3.