Hacker News new | ask | show | jobs
by RobertRoberts 922 days ago
I think the reason center is so hard for people is that you have to first understand "what" you are centering.

> Text, inline box, block box, image/object, etc...

Then, what do you want to center it in relation to?

> Parent box, page, column, div, heading, another object, etc...

If you can distill down your requirements, you find there are very few ways to center what you want.

> Text = text-align:center;

That is the most simple example, and it will center a lot of things. But I think most people when they talk about centering, they really mean "I want to take a container and center an object inside of it." But without understanding the foundation of what your container is and how it's styled, centering it can "appear" difficult. (this doesn't even address vertical centering conflicts with misconceptions that you have no control over the size of the screen you are centering on, so what happens when your content is taller/wider than the screen?)

How to make this understandable? Learn to center with very, very few variables. Then you only have a few ways to make it hard. (flex, grid, text/inline, auto margins, transform... maybe I forgot one)

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

[1] https://css-tricks.com/centering-in-css/

[2] https://css-tricks.com/snippets/css/centering-a-website/

[3] https://css-tricks.com/centering-the-newest-coolest-way-vs-t...

2 comments

See, my instinct when working with any other technology would be that if it's that complicated, then I'm not using it right, or I'm not using it for the right thing.
There should be a basic simple form of "Center this thing" and the user shouldn't have to care whether it's an image, a header, text, or buttons.

Obviously there are edge cases and complex behavior needs to be handled as well. But there should also be sane defaults and the computer should figure everything out automatically. The default behavior for an image that is larger than the screen should be to automatically scale it down while maintaining the aspect ratio.

CSS just does not have that level of usability right now. Flexbox is a huge step in the right direction but it's still not enough.