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

How to Center in CSS

howtocenterincss.com

Post reply on HN
Print view View original

21–30 of 297 posts

Re: How to Center in CSS

#21

Post by mambodog »

nkozyra wrote: post #15
mhink wrote: post #10

Doesn't Flexbox pretty much solve this problem? I mean, if you need to maintain backwards compatibility this might be reasonable, but "justify-content: center" and "align-items: center" seem to work unreasonably well for this exact purpose.

Flexbox solves this problem but it's still a bit unwieldy and verbose.

Flexbox can be a bit low level, but with it you can build abstractions (eg. classes or preprocessor mixins) for common use cases, which I think is preferable to having only a high-level tool which can't cover all use cases.

Re: How to Center in CSS

#22

Post by ChrisGaudreau »

pcwalton wrote: post #9

This site doesn't seem to be suggesting absolute centering [1] when it would be the easiest way to center things. "margin: auto" seems to be the way that the designers of CSS 2.1 intended to center things. 90% of the time, absolute centering is the easiest way to center in CSS; you should prefer it when possible. [1]: http://codepen.io/shshaw/full/gEiDt

Would this technique work to center, say, an tag with undeclared dimensions inside of a div? Or do you have to jump through hoops?

Re: How to Center in CSS

#23

Post by jekrb »

chubs wrote: post #13

Wow CSS is unfriendly, you really realise how poor it is once you learn other layout systems (android's XML and iOS auto layout, etc). Wish there was another standard that could co-exist side by side on the web, something simple enough to be implemented reliably by the browser vendors.

I've heard that android's XML layout is terrible (from an android developer) and that iOS auto layout is borderline magic (from an iOS developer).

Personally, I don't find css to be that bad at all, but I work in it at least a little everyday so it might just be stockholm syndrome.

Re: How to Center in CSS

#24

Post by Cub3 »

sondr3 wrote: post #17
nkozyra wrote: post #15

Earlier quoted context omitted.

Flexbox solves this problem but it's still a bit unwieldy and verbose.

Verbose? Compared to the other solutions it's a godsend, just use the CSS-tricks guide for it and you'll have nearly zero problems. I absolutely love it and pretty much refuse to use anything else for layout in CSS now.

Just remember IE10 only supports the 2010 flexbox spec (you can't inline-flex, need -ms-prefix etc.)

Re: How to Center in CSS

#25

Post by dominotw »

nkozyra wrote: post #15
mhink wrote: post #10

Doesn't Flexbox pretty much solve this problem? I mean, if you need to maintain backwards compatibility this might be reasonable, but "justify-content: center" and "align-items: center" seem to work unreasonably well for this exact purpose.

Flexbox solves this problem but it's still a bit unwieldy and verbose.

Verbose?

Re: How to Center in CSS

#26

Post by explosion »

I like that tool very much, but it would be nice to see the generated CSS styles displayed separately from the HTML.

By this, I mean generating the following individually: 1) the HTML with a class applied to a sample element to be centered 2) the separate CSS for that particular class selector

This is just a little nitpick based on my preference for avoiding inline styles; overall, nice work!

Re: How to Center in CSS

#28

Post by nkozyra »

sondr3 wrote: post #17
nkozyra wrote: post #15

Earlier quoted context omitted.

Flexbox solves this problem but it's still a bit unwieldy and verbose.

Verbose? Compared to the other solutions it's a godsend, just use the CSS-tricks guide for it and you'll have nearly zero problems. I absolutely love it and pretty much refuse to use anything else for layout in CSS now.

Compared to the rest of the CSS spec, I'd say so. It certainly solves the problem much better, though.

Re: How to Center in CSS

#29

Post by drcode »

sondr3 wrote: post #17
nkozyra wrote: post #15

Earlier quoted context omitted.

Flexbox solves this problem but it's still a bit unwieldy and verbose.

Verbose? Compared to the other solutions it's a godsend, just use the CSS-tricks guide for it and you'll have nearly zero problems. I absolutely love it and pretty much refuse to use anything else for layout in CSS now.

IMHO constraint systems like GSS (http://gridstylesheets.org/) handle centering in a much cleaner way. Pity that approach hasn't gotten any traction (though some people smarter than me say it's a bad idea, so who knows what the right answer is...)
Post reply on HN