The code shown on that page actually doesn't work, though the code in the github repo does.
And this exposes the problem with the current state of the art: yes, you can probably get flexbox to do what you want [@] if you know how. But if you don't know how, trying to figure it out is still very hard. You should be able to write:
<center>stuff</center>
or
<vertical-center>stuff</vertical-center>
There is really no reason that should not Just Work. (The <center> tag has worked for 20 years, notwithstanding that it has been deprecated for most of that time.)
---
[@] What if I want to put something in the lower left or upper right hand corner?
This is a gross abuse of html, but if you really want that syntax, you can have it.
I can't say I understand all the complaining here. You want to make $200K a year sitting at a desk, but learning flexbox or googling when you need it is too much effort?
Brain fuck has pretty simple syntax too yet nobody wants to code in it because its trashy and inelegant.
Im tired of programmers who've become experts in building structures by ramming screws into wood with a hammer claiming that all is well with the world when you have powerful hammers and screws.
I think we have a whole generation of front end programmers who haven't seen a screw driver.
Your code breaks the <center> tag: if you try to nest a <center> inside your <vertical-center> it doesn't work.
And my complaint is that I believe that computing should be accessible to everyone, and that simple things should not be made difficult just so that an elite guild can command above-market wages to fix problems that they themselves created. I don't believe in broken-windows economics.
Wait, front-end developers who use CSS created the problems of CSS? That's really funny. I mean, that's the most mind-blowing accusation I've heard in a long time. I would have to suggest you are commenting on a topic that you actually know very little about.
Who do you think created CSS? CSS was not handed down on stone tablets by the gods, it was designed by humans, and I presume that at least some of the people who designed CSS actually used it (though to be honest I don't actually know who was on the committee). I don't know if it was their intent to make something Byzantine that served as an effective barrier to entry to doing front-end design, but that was in fact what they did.
Who created CSS as we know it? CERN. More or less.
Who first tested and implemented CSS? Browser programmers.
These days it's under the control of committee. I think I would disagree with the notion that CSS devs are the ones to blame in this case. Sure, there's lots of blame to share for the problems. To imply that CSS developers intentionally forced it to be complicated for purposes of job security is laughable.
I want the contents of my div to be centered inside my div.
Just like <center> works, but vertically. You don't need <foo><bar>content</bar></foo> for horizontal centering. I consider it a layering violation to have to do that nesting.
Maybe we are misunderstanding each other, but while you don't need an "extra" container, you do need a container with some known height to vertically center the content in:
http://jsfiddle.net/c20gq4pz/
To be fair though, this has been a problem for quite some time and mostly stems from many web devs not understanding block and inline correctly and thus applying unneeded divs everywhere even there are enough hooks for their styles already.
I have no objection to having a style sheet that defines what the <center> tag does. But it should at least be possible to have a center tag and a vertical-center tag. AFAICT it is not possible. At the very least you need both a center-capable container and centered elements.
You're always centering children with respect to something, and you specify the fact that you want children centered on the thing you're centering them in, rather than the elements themselves. This makes more sense, in my opinion, and as said in the sibling comment, it's two simple rules.
I do a tonne of flexbox and grid in my day-to-day, and these complaints are quite simply out of date. Almost any layout in CSS these days can be done easily and intuitively.
If you are learning CSS in 2018, then there is little chance that you didn't encounter flexbox and its capabilities. Nowadays there are many good, crossbrowser solutions for common problems, but I have to agree, intuition is not a feature of CSS.
So should there also be a <rightalign> and a <leftalign> and a <topalign> and <bottomalign> and <spaceequally> and and and...?
If you want to lower left align you set align-items and justify-content to flex-end and flex-start. For upper right, flip those. (if you’ve changed flex-direction those will need to shuffle around.)
I seriously don't understand why having a different tag for every possible alignment would be somehow easier or more discoverable than just using css rules. Novices are going to have to be looking stuff up either way- I get the concern about discoverability but I strongly doubt anyone is just typing tags to see what works.
And this exposes the problem with the current state of the art: yes, you can probably get flexbox to do what you want [@] if you know how. But if you don't know how, trying to figure it out is still very hard. You should be able to write:
or There is really no reason that should not Just Work. (The <center> tag has worked for 20 years, notwithstanding that it has been deprecated for most of that time.)---
[@] What if I want to put something in the lower left or upper right hand corner?