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

91–100 of 170 posts

Re: The complete guide to centering a div

#91

Post by magicalist »

stormbrew wrote: post #78
magicalist wrote: post #76

Earlier quoted context omitted.

I'm not sure what your point is. Web standards have had a turbulent history? Of course that's true. - CSS 2 was originally published as a recommendation in 1998. CSS 2.1 was pushed as a recommendation in 2011. Maybe something was wrong? - "Ignored by vendors" is a bit of an understatement, because your "close to 20 years" includes 5 years of the vendor with 90% marketshare not releasing anything at all. - FWIW, what…

> Maybe something was wrong? Well yes, that is exactly my point. It's not like the desire to center things vertically came about a mere 5 years ago, it was a thing that people were doing in 1996 when CSS was first propagated. I don't really get your point. You seem to be arguing that people shouldn't have been frustrated for the last 17 years by CSS' inability to do basic and non-novel tasks simply because it's start…

My post may have been confusing because I was addressing two different things, the standards process and the merits of flexbox's design.

> You seem to be arguing that people shouldn't have been frustrated for the last 17 years by CSS' inability to do basic and non-novel tasks simply because it's starting to become possible now.

The standards process is frustrating. For the CSS working group in particular, there was until relatively recently a stubborn clinging to monolithic CSS standards even with nearly a decade of evidence that holding up everything people agree on until people agree on everything is not a winning strategy. That's how you end up with being unable to center a div for so long.

Flexbox's particulars aside, however, my point is that there is a difference in kind, not degree, between "trying to express this in CSS makes me want to murder the universe" (the case in 2008) and "this thing does not work in a browser from 2008" (the case today). If your point is that it's taken a ludicrously long time to get there, I don't think you'll find anyone to disagree with you.

Re: The complete guide to centering a div

#92

Post by hesslau_ »

DigitalSea wrote: post #71

My utmost favourite technique for centering unknown width and height DIV's/elements perfectly center in the page is using 2dtransforms. I've created a Codepen here that shows off the technique, it's simple and well supported IE9+: http://codepen.io/Figurated/pen/zcypx — if you don't need to support IE8 any more, it's a perfect solution.

My favourite technique: position absolute and top: 0 bottom: 0 left: 0 right: 0

also doesn't require a fixed width http://codepen.io/anon/pen/vsliJ

Re: The complete guide to centering a div

#93

Post by TheZenPsycho »

Of course, CSS was a compromise between old guard semantic "purists" (who envisioned an HTML document as being pure text with structural meaning semantically applied to the content via tags, with the browser in full control of presentation) and designers, who wanted control over look and layout (the fools!). And so, CSS was created, and designers could have their silly colours and fonts. Any layout or typographic abilities were added as a neglected and poorly considered afterthought.

Designers being what they are, worked out systems like tables, and the hacks in the link to get what they want out of CSS anyway. (but why would you want to centre anything? that's stupid! the original designers of CSS grumble)

meanwhile, far superior systems, such as "Constraints Based CSS" were proposed, and ultimately rejected because it's stupid and irresponsible to want to control the layout of a webpage!

Now it's 2014 and we have flex box as a patch over. Constraints based css would have been much better, and that's what you get in Cocoa Auto-layout now,

but oh well. let's copy java and flash. what difference does it make?

http://www.cs.washington.edu/research/constraints/web/ccss-u...

Re: The complete guide to centering a div

#94

Post by voltagex_ »

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.

Depending on how you do the layout it also may not play well with screenreaders.

Re: The complete guide to centering a div

#95

Post by twobits »

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?

Agreed. I think everyone will move to canvas eventually (for the whole site), and get over it.

Re: The complete guide to centering a div

#97

Post by adwf »

jebblue wrote: post #80
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.

This is as close as I can get without HTML tables: Testing making a footer with CSS This is the content area. This is the footer.

I usually go with the footer height 50px, content min-height 100%, bottom-margin -50px. Generally works, but still has some edge cases that can throw it for a loop.

Whereas what I instinctively want to do is something more like a conditional absolute positioning. If the content fits above the fold, then have the footer absolute at bottom:0. Else, have it relative to the content div. It can be done in JS of course, but I feel it should be a lot easier to do in CSS.

Re: The complete guide to centering a div

#98

Post by iamjustin »

mcantelon wrote: post #82
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?

Obligatory: http://4.bp.blogspot.com/-E6ukbgTm5iM/Um0CrEtzXSI/AAAAAAAAG_...

I was expecting this one:

http://inspectelement.com/wp-content/uploads/2013/03/Q3cUg29...

Re: The complete guide to centering a div

#99

Post by Lerc »

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?

CSS has two faces, the awesome "You can make amazing things with ease" face and the "It won't do what I want unless I create some cludgy arrangement of elements in order to attach a combination of weird properties"

Those two faces are because of two simple facts.

1. CSS is a really good way to set properties.

2. The properties are shit.

The part of the properties that is most gloriously broken for layout is that the X and Y dimension behave differently. That's _really_ not what a lot of websites want.

I experimented a while back and came up with a model for placement like this

http://www.fingswotidun.com/gunk/boxtest.swf

If you had properties like these you could center, proportionally center, left/right/top/bottom align and handle growing in the direction the user wants.

What CSS needs is a new generation with all new properties, a full modal change so that it doesn't have to be backwards compatible and interact with archaic properties.

Re: The complete guide to centering a div

#100

Post by Tloewald »

magicalist wrote: post #55
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 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 if you do it in just the right way and apply a couple of rolls of duct tape to it. We're at CSS3 (?) partially implemented with stuff being proposed for CSS4, and none of these common problems have been solved.

Post reply on HN