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

231–240 of 297 posts

Re: How to Center in CSS

#231

Post by oneplusone »

dkersten wrote: post #220
pcwalton wrote: post #82

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.

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/

Re: How to Center in CSS

#232

Post by hawleyal »

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; }

Pretty simplistic/naive.

Re: How to Center in CSS

#235

Post by cyphax »

protonfish wrote: post #224
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.

Your example does not align vertically, so I am not sure what you are trying to prove. This CSS will put something in the center of your screen quite easily position: absolute; top: 50%; left: 50%; Is that so hard? Having poor CSS skills is not the same as CSS being broken.

Unfortunately, that's telling your div to start halfway. Following your suggestion leaves me with an element with its top left corner in the exact center of the containing div.

I'm not a fan of CSS due to issues like this. It falls in the same line as issues where, for example, paddings and margins (and borders) are added to the size of your div rather than subtracted. There's a solution for that that makes sense nowadays but by the time that came about, I'd already stopped liking CSS.

Re: How to Center in CSS

#236

Post by serve_yay »

supercoder wrote: post #56
DiThi wrote: post #27

As others said, flexbox is a complete replacement for all layour hacks in CSS. This site helped me understand flexbox: http://flexboxin5.com/ Browser support: http://caniuse.com/#feat=flexbox

That site is completely broken in Safari. Don't think we're ready for flexbox just yet.

Ha, the first time I saw he site I was incredibly confused for that reason.

Re: How to Center in CSS

#237

Post by rivo »

kowdermeister wrote: post #206
rivo wrote: post #200

Unfortunately, this page does not give a solution to a long-standing centering problem I've had: Given a single DIV of unknown width and height, how do I center it in the middle of the screen (floating, i.e. fixed)? Note the "single DIV" so no wrapping in additional container DIVs! The only approximation I could find was this: .mydiv { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); } This, how…

Flexbox does it for you. http://codepen.io/kowdermeister/pen/mJbGdr

This also relies on a container DIV (".overlay"). So Flexbox doesn't help here.

Re: How to Center in CSS

#238

Post by Touche »

pcwalton wrote: post #82
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; }

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.

It's just too bad you have to add comments to understand what "justify-content: center" means. I mean, I guess it was too much trouble just to give it the semantically correct names.

Re: How to Center in CSS

#239

Post by talmand »

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; }

A tool is not broken if people insist on using it in ways it was not designed to be used.

The fact that you say there is no easy vertical center, of which I disagree, doesn't make it broken. It means it's missing a feature you wish existed.

Re: How to Center in CSS

#240

Post by acdha »

kagamine wrote: post #160
actionscripted wrote: post #49

Earlier quoted context omitted.

Which still doesn't cover older browsers just prefixes things appropriately for those that support it.

But for older browsers you can use the old specification too. This means including the old specification before the new one in the CSS block; that will provide a warning in the web-inspector. Then you will need a hack for here is a sample (btw, it's so long ago now, I included modernizer.js and slectivizr.js but I have no idea if they were anything to do with this >_ #box_content { /* 1st draft flexbox required for I…

That assumes support exists at all (many people need IE8) or isn't broken in some way which affects your design (Mobile WebKit is the worst offender here but I've had to file bug reports for every major browser on this).

I want to just start using flex box everywhere, too, but we're just at the point where that's becoming realistic. I won't fault anyone for waiting if they have more representation from older browsers. The real progress lately has been the push for Microsoft to get IE onto more of an evergreen update schedule so we won't have to keep doing this once XP and IE8 are a bad memory.

Post reply on HN