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

111–120 of 170 posts

Re: The complete guide to centering a div

#111

Post by STRML »

SteveP1961 wrote: post #69
jdudek wrote: post #64

Earlier quoted context omitted.

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.

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

Re: The complete guide to centering a div

#112

Post by buttsex »

statictype wrote: post #86
jebblue wrote: post #62

Earlier quoted context omitted.

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.

Generally I agree that too many people have a fetish about avoiding tables when it's clearly the right tool for the job. But I've definitely been bitten by using them. Table layouts don't play well with other CSS properties.

If you are using HTML tables for layout then you definitely aren't using the right tool for the job. If it isn't tabular information then it doesn't belong in a table.

Re: The complete guide to centering a div

#113

Post by STRML »

This is my favorite vertical centering method [1] and combined with the table/table-cell method, it allows me to avoid using JS for layout about 95% of the time. It's not very well-known and even though I've used CSS for well over a decade, I have no idea why it works.

The real trick is realizing that `margin:auto` actually does do something, so long as you set a fixed width/height and position: absolute with dimensions set to 0. But for the life of me, I don't understand why that happens to trick the box model into working properly. But this technique is fantastic and really helps out when table/table-cell interacts badly with your styles, or you need to support older browsers.

I would be very happy if someone in the know could explain why this technique works.

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

Re: The complete guide to centering a div

#115

Post by magicalist »

Tloewald wrote: post #100
magicalist wrote: post #55

Earlier quoted context omitted.

> we can't center stuff reliably or conveniently Yes we can. The problem is not the lack of ability, it's that no one is backporting to IE8 or IE9 but lots of people still run them. > images won't scale up to fit (only down...) I don't understand what you mean here > multi-column text is barely implemented and Google is ripping it out No, the currently shipping implementation of multicol will be staying. I think you'…

You're completely missing the point. Having elaborate workarounds for utterly common problems that have all kinds of edge cases is exactly where we were with button rollovers in 2005. All the W3C had to do for CSS2 was look at Mac App or Cocoa or any other decent GUI framework and figure out what needed to be added to make all that stuff work simply. Instead we get ridiculous crap that sort of half solves the problem…

No, you missed what I wrote (for instance, nothing of what I wrote would qualify as "elaborate"). If you're referring to centering a div, the issue is not workarounds because the specs are half-assing it, the issue is workarounds because people are still running IE8. All current browsers ship flexbox. You can stop catering to those older browsers, but that's a business decision, not a web standard one.

Best time to plant a tree is 20 years ago and all that. CSS 2 came out in 1998. At some point, you have to let it go. Current state is very far from perfect, but the common problems you listed have been solved.

Re: The complete guide to centering a div

#117

Post by potch »

This article is not actually correct. There are really 2 or three techniques for centering a block level element. The post repeats these techniques for multiple scenarios, and is wrong about the first vertical centering technique.

Re: The complete guide to centering a div

#118

Post by anon1385 »

pcwalton wrote: post #63
Tloewald wrote: post #37

Earlier quoted context omitted.

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.

The browser your employer ships only currently has partial support for flex box. Why do Mozilla employees insist on being misleading about Firefox's standards support? Flex box is not ready for mainstream use. Not just because of 'old browsers', because of your current browser.

https://bugzilla.mozilla.org/show_bug.cgi?id=702508 this won't be in the stable release for a couple of months.

See http://caniuse.com/#search=flexbox for other issues

Re: The complete guide to centering a div

#119

Post by ahallock »

buttsex wrote: post #112
statictype wrote: post #86

Earlier quoted context omitted.

Generally I agree that too many people have a fetish about avoiding tables when it's clearly the right tool for the job. But I've definitely been bitten by using them. Table layouts don't play well with other CSS properties.

If you are using HTML tables for layout then you definitely aren't using the right tool for the job. If it isn't tabular information then it doesn't belong in a table.

You can easily get around that by using `display: table` and `display: table-cell` So you have your semantic HTML elements, if you're into that sort of thing, and flexible layout options, like `vertical-align: middle`.

Re: The complete guide to centering a div

#120

Post by pcwalton »

anon1385 wrote: post #118
pcwalton wrote: post #63

Earlier quoted context omitted.

> we can't center stuff reliably or conveniently Flex box fixes this. The only reason not to use it is old browsers.

The browser your employer ships only currently has partial support for flex box. Why do Mozilla employees insist on being misleading about Firefox's standards support? Flex box is not ready for mainstream use. Not just because of 'old browsers', because of your current browser. https://bugzilla.mozilla.org/show_bug.cgi?id=702508 this won't be in the stable release for a couple of months. See http://caniuse.com/#searc…

You have been able to center stuff using flex box for years in Firefox.
Post reply on HN