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

41–50 of 170 posts

Re: The complete guide to centering a div

#41

Post by SteveP1961 »

jessedhillon wrote: post #38
SteveP1961 wrote: post #33

Earlier quoted context omitted.

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.

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

It works in a container with no fixed height. Perhaps it doesn't work for your particular requirements, but it does work.

Re: The complete guide to centering a div

#42

Post by crazygringo »

Whenever anybody says that CSS is easy, or "of course you can do that with CSS", or even hints that CSS is somehow well-designed...

...the only thing I really need to say, is that every couple months, on Hacker News, where a lot of really smart people hang out, a new top-voted story comes up about how to center a div. With tons of comments and discussion too. And it's not even a joke.

What more is there to say?

Re: The complete guide to centering a div

#43

Post by kaichanvong »

SteveP1961 wrote: post #41
jessedhillon wrote: post #38

Earlier quoted context omitted.

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

It works in a container with no fixed height. Perhaps it doesn't work for your particular requirements, but it does work.

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.

Re: The complete guide to centering a div

#44

Post by sergiotapia »

maj0rhn wrote: post #5

This is a pointless post. Use the TABLE tag. Yes, it will violate the purity of CSS, but you can trust it, and it will make your day better because it will free you angst and from extensive cross-browser testing. Simple is better than complex. Straightforward is better than arcane.

God no, I just threw up in my mouth.

Once your website is sufficiently complex, having to trail and which td belongs to what tr in which td is a NIGHTMARE.

Don't do it people - coming from a front end developer. A backend developer has no business commenting on front end issues, just a javascript developer shouldn't really dive out advice on proper DBA procedure.

Re: The complete guide to centering a div

#45

Post by lobster_johnson »

Mandatum wrote: post #17
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?

Then unfortunately you have to calculate it with JS if it varies. Vertically centering divs has always been a gigantic pain-in-the-ass. If anyone has a better idea for doing this without JS, please let me know. Once CSS implements variable-based elements (ie #div.height) then we'll have a lot more control.

As mentioned elsewhere: "display: table-cell" with "vertical-align: middle".

Re: The complete guide to centering a div

#47

Post by straws »

halisaurus wrote: post #35
lobster_johnson wrote: post #31

Earlier quoted context omitted.

"display: table-cell" with "vertical-align: middle" works.

That this is missing is surprising. This method is the most compatible across browsers and only real drawback is the additional markup.

Well, of course it comes with gotchas:

- if that item is "display: table-cell", it must be within a larger element that's "display: table" or "display: table-row"

- "vertical-align: middle" works also for inline-block elements, but that means it's subject to all the other gotchas present in the article about explicit sizing

It eventually makes a kind of sense, but these rules are passed down in folklore and trial-and-error.

Re: The complete guide to centering a div

#48

Post by adwf »

crazygringo wrote: post #42

Whenever anybody says that CSS is easy, or "of course you can do that with CSS", or even hints that CSS is somehow well-designed... ...the only thing I really need to say, is that every couple months, on Hacker News, where a lot of really smart people hang out, a new top-voted story comes up about how to center a div . With tons of comments and discussion too. And it's not even a joke. What more is there to say?

Next week: The complete guide to sticky footers!

It's unbelievable just how annoying CSS can be for seemingly simple things.

Re: The complete guide to centering a div

#49

Post by SteveP1961 »

kaichanvong wrote: post #43
SteveP1961 wrote: post #41

Earlier quoted context omitted.

It works in a container with no fixed height. Perhaps it doesn't work for your particular requirements, but it does work.

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? :-)

Re: The complete guide to centering a div

#50

Post by kmfrk »

crazygringo wrote: post #42

Whenever anybody says that CSS is easy, or "of course you can do that with CSS", or even hints that CSS is somehow well-designed... ...the only thing I really need to say, is that every couple months, on Hacker News, where a lot of really smart people hang out, a new top-voted story comes up about how to center a div . With tons of comments and discussion too. And it's not even a joke. What more is there to say?

I recently went back to a project to convert the CSS to SASS, and shit was over 1,200 LOC. I think I managed to trim something like 200 LOC, but it turns out that there were a truckload of hotfixing for all the evil quirks CSS throws at you at every given opportunity.

The LOC just grows exponentially, when you approach 100% non-quirky cross-browser uniformity.

I will say this; CSS is a great lesson in humility for every hacker and programmer who try their hand at it. And you can learn a lot about someone by how they describe CSS and the front-end developers who make a living working with it.

Post reply on HN