11 ms·
> Easily center anything, horizontally and vertically, with 3 lines of CSS This can actually be done with 2 lines now! .center { display: grid; plac
by Varauk 5y ago
> Easily center anything, horizontally and vertically, with 3 lines of CSS
This can actually be done with 2 lines now!
.center {
display: grid;
place-items: center;
}
- 3dee 5y agoHaven't people been doing this in two lines already? .center { display: table-cell; vertical-align: center; }
- deleted 5y ago[deleted]
- BiteCode_dev 5y agoI was going to say: "let's now wait 10 years for it to be usable", but then I went to canisuse and wow: 96.01% of availability! https://caniuse.com/?search=grid https://caniuse.com/?search=grid
- PinkPigeon 5y agoSome noteworthy caveats from my experience with CSS grids: - Particularly in Firefox they are much slower. When grids start to pile up on a page, performance goes down the drain - Implicit row-sizing is not really a thing in Safari or iOS -> https://stackoverflow.com/questions/44770074/css-grid-row-height-safari-bug https://stackoverflow.com/questions/44770074/css-grid-row-he... Quote from that SO post: "This is not a Safari bug. It's just a different interpretation of the spec. When dealing with percentage heights, some browsers (like Safari) adhere to the traditional interpretation of the spec, which requires a defined height on the parent. In other words, a percentage height on an in-flow element will be recognized only when the parent has a defined height. Some browsers, such as Chrome and Firefox, have moved past this interpretation and now accept flex and grid heights as an adequate parent reference for a child with a percentage height. But Safari is stuck in the past. This doesn't mean it's wrong, invalid or a bug." Just worth noting, as I had a lot of fun with that one.
- joestrong 5y agoI'd argue that `place-content: center` is better than `place-items: center` as it would handle multiple child elements in a way most people would expect from a simple centering snippet. place-content will position all the children to the center, which is generally what's desired here. place-items, would make each child element center itself within its own grid square
- tenaciousDaniel 5y agothis is my first time seeing the `place-items` property. at first glance I have no idea how it relates to `align-items` or `justify-content`. Feels like the grid API is getting a bit too cumbersome but maybe its just me.
- tshaddox 5y agoplace-items is just a shorthand property that takes 2 arguments. The first argument sets the align-items value and the second argument sets the justify-content value. If only one argument is provided (as in this example), it sets both align-items and justify-content to that value.
- joestrong 5y agoActually, this is technically incorrect. It doesn't set justify-content, it sets justify-items. This is why it works with grid, and not flexbox Source: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items https://developer.mozilla.org/en-US/docs/Web/CSS/place-items I think there's a lot of confusion for most people between justify-content/justify-items and align-content/align-items
- tenaciousDaniel 5y agoAh, I see. Thanks!
- vsareto 5y agoIt's shorthand: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items https://developer.mozilla.org/en-US/docs/Web/CSS/place-items MDN also has a list of shorthand properties if someone didn't know what 'shorthand property' really meant: https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_p... But yeah, the discoverability or suggestion-to-refactor-something-to-shorthand is typically non-existent in CSS. Lists like these are really the only way I discover CSS stuff.
- no_wizard 5y ago
- 6510 5y agoCENTER{LINE-HEIGHT:100VH} https://jsfiddle.net/pnyr1u8d/ https://jsfiddle.net/pnyr1u8d/ actually, neither of your versions work without specifying a document height. (or outer container) .center { display: grid; place-items: center; } https://jsfiddle.net/a67gzsjf/ https://jsfiddle.net/a67gzsjf/ something like this would work https://jsfiddle.net/a67gzsjf/2/ https://jsfiddle.net/a67gzsjf/2/
- papito 5y agoIt took us 20 years for a simple way to center items vertically. I mean, COME ON.
- rimliu 5y agoIt took half of that. display:table-* have been available for more than ten years already.
- tobr 5y agoIt will take another 20 years for people to stop complaining about it retroactively.
- roq 5y agoIt will take more another 20 years for people to stop commenting about this.
- ranza 5y agoLets take some time to remember table layouts and blank.gif
- tobr 5y agoHN is certainly an appropriate place to remember those. Although, here it’s s.gif. https://news.ycombinator.com/s.gif https://news.ycombinator.com/s.gif
- open0 5y agoNo need to remember, look at the source of this website.
- klibertp 5y agoAnd frames. And tables with iframes. And, indeed, 1x1.gifs. Fun times!
- memco 5y ago
- asddubs 5y agoIMO not worth it for the loss of compatibility, since flexbox is just as easy.
- runarberg 5y agoIE compatibility is increasingly rare. Grid is supported by 95% of all browsers globally. If your target group is any narrower, or if centering the content doesn’t break the page and you aren’t shy of serving a weird looking layout to people with old browsers, there is no reason not to use grid.
- asddubs 5y agothere is no reason not to use flexbox if all you want to do is center something. and that sentence doesn't even need any additional qualifiers.
- joshspankit 5y agoGrid is way better than flexbox. All hail CSS-Grid.
- perardi 5y agoGot a citation for this? I’ve seen this said, and for the life of me, I can’t find an actual reference for it.
- joshspankit 5y agoCitation: Purely subjective personal experience / opinion. At least it’s first-hand.
- eyelidlessness 5y agoThey have many overlapping capabilities, but there are things flexbox can do which grid cannot. For instance, flexbox can wrap with dynamically sized children.
- 5y ago