[jdudek]

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.

[SteveP1961]

Margin auto does work, and it'll work for most people when they need it to work.

[STRML]

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.

[1] http://codepen.io/anon/pen/whHIL