Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Thanks, but isn't that semantics? :-)


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!


> it's a degenerate solution!

Well, there you go. :-)


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.


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


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




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: