5 ms·
Came here to say the same thing. Not sure the rest of the article is worth reading if the author doesn't know CSS well enough that a) they don't know a priori t
by jessedhillon 13y ago
Came here to say the same thing. Not sure the rest of the article is worth reading if the author doesn't know CSS well enough that a) they don't know a priori that this is wrong, and b) manages to convince themselves it's true using Codepen
Here's the Codepen that shows it with a larger outer div,
http://codepen.io/jessedhillon/pen/CDqEe http://codepen.io/jessedhillon/pen/CDqEe
- SteveP1961 13y agoNo, 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.
- jessedhillon 13y agoWhat? 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.
- SteveP1961 13y agoIt works in a container with no fixed height. Perhaps it doesn't work for your particular requirements, but it does work.
- kaichanvong 13y agoThe 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.
- SteveP1961 13y agoThanks, but isn't that semantics? :-)
- jessedhillon 13y agoThe 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!
- SteveP1961 13y ago> it's a degenerate solution! Well, there you go. :-)
- jdudek 13y agoI 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/ 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 13y agoMargin auto does work, and it'll work for most people when they need it to work.
- shawnz 13y agoIt 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.