No, it doesn't work with a fixed height. I didn't claim it did, of course. In a responsive world fixed heights in a container are somewhat irrelevant, but I'll amend the article.
It sounds like you are trying to say that the equal top and bottom padding is what is giving you the centering, simply by way of the fact that there is no empty space remaining to fill. Fair enough.
Regardless, the fact that you used "margin: auto" as opposed to "margin: 0 auto" in this particular example is somewhat misleading, as well as the fact that in the description you refer to this as the "margin auto trick". As noted previously, "margin: auto" does nothing in the vertical direction, and the sample would behave identically in every browser, past and present, even if you had used the more well-defined "margin: 0 auto" like in the other examples.
What? It doesn't work at all -- without a fixed height, the height of #outer would be determined by summing the heights of its statically/relatively positioned children.
If there were multiple children of #outer, #inner would still not be centered vertically. This only works for some trivial definition of vertical centering, when what you really mean is that a single block child will occupy the vertical center position of its block parent, provided the parent's height is not specified. Which is the most obvious of statements in CSS.
The the element is merely sitting on the line-height and not being positioned. So no, I think you are incorrect on that one. It is a nice bit of work otherwise.
The height of the outer element is determined by the height of the children, plus padding. Since you have only one child, then the outer element is as tall as that one child, plus padding. Ergo, assuming symmetrical vertical padding, the inner element will by definition be centered.
It would be as if I wrote a tutorial on how to make one element fill the entire viewport, and one of my methods was "put all your content in the <body> tag" and I said that was a way to fill the viewport. That is the trivial case, it's a degenerate solution!
I don't think it is semantics, setting vertical margin: auto here has just no effect.
It's worth noting that the last example with margin:auto can be used for centering within any div that has position: relative (there's nothing special about the whole page). It also works for intrinsic dimensions, so you can center an image without knowing its size, see http://jsfiddle.net/jdudek/hfbnS/1/.
There are a few more useful techniques not covered by this article, for example:
* line-height + vertical-align: middle + display: inline-block (which allows you to center vertically an element with dynamic height)
* display: table-cell (mentioned by others in this thread, although without stating its disadvantages).
While I appreciate the effort, calling the article "complete guide to centering a div" is an overstatement.
What they're getting at is that the vertical aspect of margin:auto (that is, margin: 0 auto vs margin: auto) has absolutely no effect in your example. For your own credibility (since this purports to be a "complete" guide), this needs to be fixed and you need to add the table/table-cell method.
I think it would be best to simply replace that example with what is essentially the last example, which is much more useful. This codepen[1] shows the markup within another div. This is by far my favorite centering method, although it requires a fixed or percentage height while table/table-cell does not. It also avoids some of the bizarre quirks of table/table-cell, so there are times when one or the other is the best method.
