Hacker News new | ask | show | jobs
by arduinomancer 1849 days ago
> some things (like handing a file upload, or centering) that were, shockingly, still just as randomly difficult as they were in VBScript twenty years ago.

I don't get why the "centering is hard" trope is still being repeated in 2021.

I'm a recent new grad front end dev and have never had issues with this.

Hasn't it been years at this point since flex-box became standard?

4 comments

You're not wrong, but you may be reading it in the wrong tone.

There is a certain type of joke where the punchline is something that was true for so long, it's acceptable to repeat it ironically as a sort of inside joke, knowing it is obviously not true any more. Best pulled off if you were actually there, of course. I think that's what's going on here.

To me you proved the point. Centering with Flexbox requires styling the parent and they use two different properties for horizontal and vertical centering.

Truly simple to me would not be CSS but rather an attribute on the element. But with CSS, the simplest thing would allow one to just put a style on the element you want to center.

The other aspect of this is that there are multiple other ways of doing it.

> Centering with Flexbox requires styling the parent and they use two different properties for horizontal and vertical centering

It does require styling the container, to specify that a new layout system (Flex or Grid) is to be used instead of the default. While it's useful to have separate properties for the two directions, you can also use a single shorthand property to set both at once:

  .container {
    display: flex;
    place-content: center;
  }
Alternately, use only Grid on the parent and place-self on the child.

  .container {
    display: grid;
  }

  .child {
    place-self: center;
  }
Google doesn't seem to think it's standard: https://www.google.com/search?client=firefox-b-1-d&q=how+to+...

Do you accept this as relevant evidence about what is standard? (Or would a different search be better?)

I don't understand why this is downvoted. It doesn't look like top results for "how to center html element" show the flexbox method. My example of "center vertically css" also doesn't show the flexbox method.

The first result recommends the ol' "top:50%; transform:translateY(-50%)". [1]

The second result shows the padding method, the line-height method and the translateY method again. [2]

The third result is a complete guide asking you questions three layers deep about what you want to do and gives you the personalised answer for the scenario. [3]

I gave up afterwards.

But the point is people are still learning old ways of doing it. Should they read a guide to modern CSS? Yes, but we all know searching and clicking on the first result is easier.

[1] https://www.w3schools.com/howto/howto_css_center-vertical.as...

[2] https://www.w3schools.com/css/css_align.asp

[3]: https://css-tricks.com/centering-css-complete-guide/

Standard? I'd be happy if 10% of my interview candidates could do a flex layout.
Hiring? :)