Hacker News Reader

Comment by Varauk | Hacker News Reader

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

View on HN

It took us 20 years for a simple way to center items vertically. I mean, COME ON.

It will take another 20 years for people to stop complaining about it retroactively.

It will take more another 20 years for people to stop commenting about this.

Lets take some time to remember table layouts and blank.gif

And frames. And tables with iframes. And, indeed, 1x1.gifs. Fun times!

And rounded corners!

HN is certainly an appropriate place to remember those. Although, here it’s s.gif.

https://news.ycombinator.com/s.gif

No need to remember, look at the source of this website.

Yep, it makes no sense, especially since

  <td valign="middle">

worked flawlessly.

Of course maybe there is some good explanation... I certainly never contributed to the CSS spec.

For what I know the main argument against td is that tables are for data, not for layout.

Right, I’m not arguing for using it, I’m pointing out that easy vertical alignment has existed in some form since the 90s, so why did it take so long for a semantic version to make it into CSS? (ie, not the display:table version in the sibling comment)

What do you mean "semantic"? CSS is for presentation, not semantics.

Like, before the best way to do it in CSS was the change the display type of an element to a “table cell” even if it’s not a part of a table. I mean, changing it to “flex” or “grid” doesn’t make much sense either, really, I rather just have a box with vertically aligned content. I dunno, am I using the word semantic wrong?

OK I agree it was not intuitive to change the display-type to table-cell just in order to vertically center content. It basically mirrored how you would would vertically center in presentational HTML, except you didn't need to misuse the semantics of the table element (which is why I was initially confused by your comment about semantics.)

The flex-box approach is the most intuitive in my opinion. The flex display-type basically means you want to distribute the area of a box among its immediate child elements, and control how the children and aligned relative to the container and each other. Centering is naturally part of this.

Using grid is IMHO less intuitive, since a grid with a single cell seem just as much a hack as a table with a single cell.

Yep, I do agree that of any of them, flex makes the most sense from a language standpoint.

We generally don't remember how bad the internet search was before Google came along, but it was really, really bad. I have zero evidence but I'm pretty sure that some time ago some industry heavyweights asked themselves "Why the search in the apps works fine but the internet search is broken? Is it because the apps have the intimate knowledge of the structure of their data and the search engines don't? Shouldn't we convey to them that structure?". Thus the idea of the Semantic Web was born, using tables for layout became cardinal sin and we entered the long Dark Age of trying to wrestle floats into doing something they never could really do. Then along came Google and made it all obsolete, but the priests of Semantic Web had too much fun torturing mere mortals that they stretched the Dark Age up until the adoption of the Grid Layout. When I hear someone saying that tables are for data and should not be used for layout I want to punch them. Yes, I've been that bitter for two decades.

Haha, ya, in the end, tables are still the simplest to reason about when it comes to layout! I kept using them long past when we weren't supposed to since the whole float thing was a mess and compatibility was still a big issue.

While it's a ton of markup, tables are build upon a few easy-to-remember concepts and you can do anything (including vertically align without googling!). I'm still constantly looking up flex and grid rules.

That said, I did move on.

You can do the similar in pure CSS with:

   foo { display: table-cell; vertical-align: middle; }

And it has also worked a lot longer than the flex-approach. But now when flex is available it seem the more appropriate tool for the job.

that's because half the planet's brain are trying to make printers work

It took half of that. display:table-* have been available for more than ten years already.

this 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.

place-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.

Ah, I see. Thanks!

Actually, 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

I think there's a lot of confusion for most people between justify-content/justify-items and align-content/align-items

It's shorthand: 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_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.

May I suggest trying out webstorm or any other JetBrains IDE?

They have the best CSS completion I’ve ever seen, and it includes live (and cached) mdn documentation for each rule. It also suggests shorthand collapses as a feature

I am a backend engineer, but I need to do work on UI for my personal project. This guide from Rachel Andrew on CSS grid and flexbox is superb. She will take you from a n00b to a total Grid Ninja.

https://www.smashingmagazine.com/2020/01/understanding-css-g...

Don't forget align-content and justify-items !

If you use PostCSS, postcss-preset-env[1] is pretty neat for reading up on the latest features. E.g. here is the place properties feature[2].

1: https://preset-env.cssdb.org/ 2: https://preset-env.cssdb.org/features#place-properties

IMO not worth it for the loss of compatibility, since flexbox is just as easy.

IE 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.

there 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.

Grid is way better than flexbox. All hail CSS-Grid.

Got a citation for this?

I’ve seen this said, and for the life of me, I can’t find an actual reference for it.

Citation: Purely subjective personal experience / opinion.

At least it’s first-hand.

They have many overlapping capabilities, but there are things flexbox can do which grid cannot. For instance, flexbox can wrap with dynamically sized children.

Also harder to learn.

They solve different problems.

In general: Flex is for flowing content, grid is for structured. You can do some awesome wrapping with flex that is impossible with grid. Also `margin-inline-start: auto` is pretty rad using flex, although you can do something similar with `justify-self` with grid.

A good use case for flex would be a list of tags, that need to wrap.

Grid is not a replacement for Flexbox, it compliments it. Flexbox excels when you are only concerned with one dimension, grid excels when you're concerned with two (ie, a grid!) And yes, there is overlap.

What browser are you even worried about at this point? IE isn't even supported by microsoft any more.

That is not true[0].

[0]: https://death-to-ie11.com/

It is in the sense that they produce websites that no longer work properly with IE.

Grid has extremely broad support.

https://caniuse.com/css-grid

The notable exception is IE 11…though even then, with a bit of autoprefixer magic, you may be able to use this.

or you could just use flexbox to do the exact same thing and have a superset of that extremely broad support, including ie11 without having to rely on any kind of magic.

https://caniuse.com/flexbox

I do use grid when I need it, but I don't see the point of using grid in places where flexbox will do. Granted this is on the verge of not mattering at all anymore, but I just don't see the point in using something less compatible when you don't have to.

I want to learn grid, and I keep waiting to be given a layout I can't implement in flexbox as an excuse. It's been years of waiting through multiple jobs.

I like grid because it eliminates the need for any elements that exist purely for layout. This makes markup cleaner which makes it easier to change in the future.

But as I stated in elsewhere in this thread, grid is not a replacement for flexbox. There is overlap, they both have their strengths.

the one thing i couldn't do with flexbox where I had to use grid was a sidebar that was being rearranged responsively, part of it below the main content, and part of it above. but yeah, most of the time flexbox + order can get you quite far

An acceptable subset of CSS Grid works on IE11. And if you use autoprefixer, 99% of the time would work out of the box.

I have not found this to be true at all. It's far less than 99%, and would require double checking all your work in IE11 to make sure it works. I tried some basic layouts and found that a lot of unexpected things occurred. If you're supporting IE11, CSS grid isn't worth it.

I 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

Some 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-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.

I'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

Haven't people been doing this in two lines already?

  .center {
    display: table-cell;
    vertical-align: center;
  }

  CENTER{LINE-HEIGHT:100VH}

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/

something like this would work

https://jsfiddle.net/a67gzsjf/2/

Reply on news.ycombinator.com