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

251–260 of 297 posts

Re: How to Center in CSS

#251

Post by dominotw »

oneplusone wrote: post #231
dkersten wrote: post #220

Earlier quoted context omitted.

Flexbox is nice and makes some things easier, but its still (IMHO) a half assed solution compared to something like QML's anchors. In QML I can center like this: anchors.centerIn: parent (replace parent with id of item you want to center in if not the parent item). You can also do just vertical or horizontal centering, or you can fill another item or you can anchor eg the left of your item the the right of another it…

That is why CSS Grids are coming: http://dev.w3.org/csswg/css-grid/

Are they really coming? I only see it in IE.

Re: How to Center in CSS

#252

Post by tomjen3 »

supercoder wrote: post #55
cyphunk wrote: post #51

Earlier quoted context omitted.

Every 4 years: "lets check if latest css can center dynamic sized things without a bunch of #container_of_container cruft". Just stick with: And what the hell does "margin: auto" mean ? I'd like to hear some print designers using that in normal conversation. "oh and also i'd like these margin's auto'ed". At this rate the table tag is going live longer than the copyright on mickey mouse.

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.

Kinda. I used to agree with you for the longest time, but I can relatively easily make a CSS bootstrap page responsive, because I can override the bootstrap CSS, but there is no way to override the behaviour of .

Re: How to Center in CSS

#253

Post by menssen »

I often use this as an interview question for CSS people: "How would you vertically center a box inside another box." I like it because there's like four correct answers, each with drawbacks. The general answers, from worst to best, are usually:

  1. margin: auto (wrong)
  2. top: 50% (mostly wrong)
  3. negative margin-top (correct if you know the size)
  4. table-cell or translateY (correct)
  5. a correct answer plus a discussion about why it has to be a hack
FWIW, when you set everything to "Unknown", this site tells you to use display: table-cell. If you don't have to support IE8, I generally prefer "top: 50%; translate-Y: -50%"

[Edited for spacing.]

Re: How to Center in CSS

#254

Post by freshyill »

lobo_tuerto wrote: post #246
lolo_ wrote: post #195

Earlier quoted context omitted.

Unfortunately, though flexbox is nice and a welcome addition, it's not the panacea people make it out to be having used it a fair bit in the past - the details of how it plays with the rest of the layout and the various options are complicated (see http://www.w3.org/TR/css-flexbox-1/ if you don't believe me), and sometimes the interactions are confusing. I still think there's scope for a language that compiles to CSS…

Maybe this can clear some things up: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I've been doing flexbox heavily for nearly the past year, and that post is my go-to reference, because I still can't remember all the properties and values. Highly recommended.

Re: How to Center in CSS

#255

Post by freshyill »

Nilzor wrote: post #207
nailer wrote: post #201

Earlier quoted context omitted.

SASS mixins are great, but Autoprefixer is better for prefixes: it looks the same as writing actual CSS (just with no prefixes) and has no cognitive overhead during editing. Compare the Bourbon mixin: @include background(linear-gradient(red, green) left repeat); to autoprefixer: background: linear-gradient(red, green) left repeat;

AAAAaaand we're back to 7 solutions to a simple problem

How so? Autoprefixer allows you to just write spec CSS and let it worry about prefixes.

Re: How to Center in CSS

#256

Post by freshyill »

visarga wrote: post #108
sondr3 wrote: post #101

Earlier quoted context omitted.

I'm pretty sure flexbox can solve two column layouts very well, just not with one continuous piece of text.

It would seem there is less than 92% support for flexbox yet.

So fall back to display: table for the garbage browsers. This is not difficult stuff.

Re: How to Center in CSS

#257

Post by nonplus »

nailer wrote: post #140
rsanek wrote: post #121

Earlier quoted context omitted.

Only partially. You usually have to use browser prefixes to get it to function. http://caniuse.com/#feat=multicolumn

Add Autoprefoxer in your build process and never type them again.

That's not a solution; that's a workaround.

Re: How to Center in CSS

#258

Post by ChuckMcM »

lisper wrote: post #38

The mere fact that a site like this can exist and not be a joke is proof that CSS is still badly broken. I should be able to center things by writing: foo { align: center; valign: center; }

Heh, generally any time there is a site with a name that is a search query it is an SEO hack. I was surprised it wasn't plastered in ads :-)

That said, centering (and typography) in CSS and elsewhere is that you mix passionate people with a really hard problem and you don't get answers, you get a lot of debate. I used to read the alistapart mailing list and it was intense at times. Suffice it to say that when the content of part A and part B are different by 1 screen pixel, and you're centering, do you assume +1 pixel or -1 pixel? (You don't get 1/2 pixel resolution) a typically large debate

Re: How to Center in CSS

#259

Post by pcwalton »

TeMPOraL wrote: post #174
pcwalton wrote: post #110

Earlier quoted context omitted.

> The table layout algorithm might be incredibly complex, but I'd rather have a browser writer have the headaches than me. Completely disagree. The Unix philosophy is right when it comes to layout: you want to be simple, fast, and predictable . This attitude is also why we are in a situation where the Web is slow compared to native platforms. Simple things tend to be fast things. Complex things tend to be slow things…

And the things you do to properly align stuff in CSS are anything but simple. You took the complexity from the place where it could be well-defined and heavily optimized and have it to the hands of every developer to do it in their own, broken way.

I fail to see how centering something in flexbox is complex. It's literally one property once you've switched to the new mode. And absolute centering is really simple once you understand how containing blocks work.

Your implications that table layout can be "well defined" or "heavily optimized" are both false. The problem is that table layout is ill-defined: it's really a pile of hacks upon hacks that were invented at Netscape a long time ago and still not standardized or consistent between browsers. And, speaking as someone who optimizes layout engines for a living, complexity is the #1 enemy of "heavy optimization". Spec complexity is the #1 reason why layout is so slow, because it makes layout engines large, complex, and brittle.

Re: How to Center in CSS

#260

Post by pcurve »

RobertKerans wrote: post #148
pcurve wrote: post #85

Earlier quoted context omitted.

I agree and it really bothers me that all the markups in modern web pages are littered with COL, span, md, lg, xg, 1/2 2/3, with gibberish nestings. Semantic web went out the window, in favor of responsive web. The whole web is fad-driven, so I'm glad at some point, pendulum will swing back. Meanwhile, I'm just happy parallax fad is dying out.

Allowing an arbitrary website to work on a phone isn't really a fad, though. In a few years time, there's not going be a huge sigh of relief as everyone gets back the fixed-width websites they've been crying out for.

"Allowing an arbitrary website to work on a phone isn't really a fad, though." Agreed, but current implementation is mostly terrible, with 6 break points, 1-2MB downloads, everything = single page app, etc. So the concept of write-once, run everywhere is not a fad, but the implementation is very fad-driven.
Post reply on HN