Live data from Hacker News

How to Center in CSS

howtocenterincss.com

161–170 of 297 posts

Re: How to Center in CSS

#161

Earlier quoted context omitted.

I think I'd rather just manipulate HTML with Javascript. At least then I only have one problem, which is HTML with inline styles. No separate CSS file to maintain or CSS rule precedence to worry about.

You forgot the performance problem....

And anyone who wants to browse with JavaScript disabled…

Re: How to Center in CSS

#163

Earlier quoted context omitted.

You forgot the performance problem....

And anyone who wants to browse with JavaScript disabled…

People who disable features of their browser on purpose will always be getting a degraded experience. No way around that.

Re: How to Center in CSS

#164

Earlier quoted context omitted.

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

No, if you don't have a defined height you will need to either use "display: table", the table-cell technique, or flexbox. When I told the site that I had a defined height, however, it still suggested the table-cell trick, which was not the optimal solution because of the extra markup required. In my experience, most of the time when I do want to center something vertically, I have a defined height (which can be a pe…

With no defined height you can still use the `translate(-50%, -50%)` hack, right? I'm kinda surprised it hasn't been mentioned in this thread at all; I use it all the time. http://codepen.io/padolsey/pen/NqKzVG

Re: How to Center in CSS

#165
post #124
post #106

Earlier quoted context omitted.

A basic rule of universe is that complexity remains, you can merely shift it around. The table layout algorithm might be incredibly complex, but I'd rather have a browser writer have the headaches than me.

> A basic rule of universe is that complexity remains, you can merely shift it around. Not really. CSS grid systems (like in Bootstrap) require some ugly and non-semantic markup, but they're not very complex.

Also, [0], since “All problems in computer science can be solved by another level of indirection, ...”.

[0]: https://www.ostraining.com/blog/coding/bootstrap-right-way/

Re: How to Center in CSS

#167
post #138

Earlier quoted context omitted.

I also find it crazy how there was a huge campaign to remove use of the table tag for layout. 'It's non semantic! You're mixing layout and content!' people would cry over and over. .. But then we've ended up with bootstrap and it's grid layout, where we're doing exactly that, and for some reason it's perfectly fine.

Browsers should e.g. allow tables to be sorted by clicking column headers. They can't, because tables aren't always tables.

How about an opt-in attribute to enable ordering then?

...

Re: How to Center in CSS

#169
post #158
post #150

Earlier quoted context omitted.

The element has no semantic meaning, screen-readers don't read them and they have no intrinsic behaviour unless associated with an aria tag.

Why couldn't we just have made non-semantic tables? In addition to the semantic tables, I mean.

Divs with display:table/table-row/table-cell _are_ non-semantic tables.

Re: How to Center in CSS

#170

Earlier quoted context omitted.

You're in luck. foo { display: flex; /* opt into the new box model */ justify-content: center; /* "align" */ align-items: center; /* "valign" */ } Vendor prefixes may or may not ruin your day (for now), but the spec is there and is exactly what you want. CSS is no longer "badly broken" if that's your metric.

Sweet. I figure only 15 more years until we get two column layouts working, and then we'll finally be able to publish like it's 1979.

Hm, had you said 1978, I would have gotten the reference (Spoiler: TeX, though maybe not really 2-column at the time?). Did you have something specific in mind when writing 1979?
Post reply on HN