Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

The complete guide to centering a div

tipue.com

Post reply on HN
Print view View original

61–70 of 170 posts

Re: The complete guide to centering a div

#61

Post by jessedhillon »

SteveP1961 wrote: post #49
kaichanvong wrote: post #43

Earlier quoted context omitted.

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.

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 tag" and I said that was a way to fill the viewport. That is the trivial case, it's a degenerate solution!

Re: The complete guide to centering a div

#62

Post by jebblue »

sopooneo wrote: post #51
adwf wrote: post #48

Earlier quoted context omitted.

Next week: The complete guide to sticky footers! It's unbelievable just how annoying CSS can be for seemingly simple things.

I may be using words incorrectly, and I'm not positive you can even make the distinction, and I am happy to stand corrected, but it always seemed to me that CSS was fine for style , but terrible for layout . So I think I'm agreeing with you.

Right, to me plain HTML tables are great for overall master page layout yet it seems everything I've read and the few web geniuses I've met will deride using them over CSS.

Re: The complete guide to centering a div

#63

Post by pcwalton »

Tloewald wrote: post #37
lpolovets wrote: post #16

I don't know anything about the history of CSS's design, but I'm perpetually amazed that positioning (and specifically centering) requires so much CSS magic. I would think CSS positioning would be a one-liner, but instead it's a collection of context-dependent, browser-dependent recipes. I wonder if there's a good reason for the madness, or if it's just poor design. (FWIW, I'm a backend engineer and have only dabbled…

The thing that boggles my mind is that we're over ten years and three major versions in and we can't center stuff reliably or conveniently, images won't scale up to fit (only down...), multi-column text is barely implemented and Google is ripping it out, the box model is borked by default, it's non-trivial to determine the layering of UI elements, and so on. It's amazing that we get solutions for things that no-one r…

> we can't center stuff reliably or conveniently

Flex box fixes this. The only reason not to use it is old browsers.

Re: The complete guide to centering a div

#64

Post by jdudek »

SteveP1961 wrote: post #49
kaichanvong wrote: post #43

Earlier quoted context omitted.

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.

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

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.

Re: The complete guide to centering a div

#66

Post by addedlovely »

A few additions. If you know the width and height of the element, centering horizontally & vertically can be achieved with one like so:

.center-div { height:100px; width: 100px; position:absolute; top:50%; left:50%; margin: -50px 0 0 -50px; }

This can be modified for the 'centering at the bottom of the page' example, but with more efficient code.

More challenging is centering the unknown: http://css-tricks.com/centering-in-the-unknown/

Re: The complete guide to centering a div

#67

Post by ville »

hawkharris wrote: post #13

What about cases in which developer wants to vertically center a div, but he or she doesn't want to specify a height property?

This article nicely shows all the alternatives with a list of caveats for each: http://coding.smashingmagazine.com/2013/08/09/absolute-horiz...

Re: The complete guide to centering a div

#68

Post by shawnz »

SteveP1961 wrote: post #33
jessedhillon wrote: post #27

Earlier quoted context omitted.

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

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.

Re: The complete guide to centering a div

#69

Post by SteveP1961 »

jdudek wrote: post #64
SteveP1961 wrote: post #49

Earlier quoted context omitted.

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

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 usef…

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

Re: The complete guide to centering a div

#70

Post by SteveP1961 »

jessedhillon wrote: post #61
SteveP1961 wrote: post #49

Earlier quoted context omitted.

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 conte…

> it's a degenerate solution!

Well, there you go. :-)

Post reply on HN