[charliebwrites]

Can somebody explain to me why centering a div is such a challenge to have an easy implementation for?

It seems like Browser makers, Languages creators, and developers all have a pretty strong incentive to solve such a fundamental, basic problem in web development to make the design experience easier.

Why haven’t these groups come together to make an easy solution to this? What am I missing?

[mhink]

They *have* come together. That's why we actually have several options built for purpose and native to CSS these days, as opposed to relying on hacks and Javascript (which was surprisingly common even as recently as 5-6 years ago. The name of this article is more or less a joke, because most people with any experience will recognize that since Flexbox and Grid have become widely available, the answer is generally "use Flexbox or Grid". Knowing the nuances of these layout algorithms is table stakes for building UIs that don't feel "janky".

The problem with designing and implementing application layouts for the Web is that it's such a dynamic medium. You can't ever rely on a particular viewport size, and you generally can't rely on content size either.

Like, just as a simple example: build me a page which has a white background and three blue boxes in the middle which contain white text saying "foo", "bar", and "Supercalifragilisticexpialidocious".

How big should these boxes be? Should they even be the same size? How should text wrap within them? How should the text itself be aligned within the boxes? When you say the "middle", do you mean centered vertically or horizontally? Are they laid out in a row or in a column? What's the expected behavior when the viewport size is too small to accommodate them? Should the boxes themselves wrap in some special way? Should they resize themselves?

This isn't even really splitting hairs or anything, it's just sort of the mindset you get into when you start working within a domain that's governed by *constraints* rather than specific sizes.

[JimDabell]

Because what people mean by “centring” varies depending on context. You are actually talking about a group of several different behaviours and you don’t always want the same one. So you need multiple behaviours, and you need multiple ways of specifying those behaviours.

The most obvious example: horizontal and vertical centring are different because our writing system has a specific direction it flows in. You can’t just do the same thing for horizontal as for vertical because text doesn’t work that way.

[hnlmorg]

This problem was solved literally decades ago with <center>. I appreciate why that HTML tag was deprecated but I also completely sympathise with why people scoff at the complexity of doing the same thing with CSS.

[nicoburns]

<center> only centers horizontally which has been easy with CSS for years. It only gets tricky when you also want vertical centering.

[hnlmorg]

this blog post and subsequent discussion is literally just about horizontal centring!

I’ve been building websites longer than most (since 1994 in fact) and centring in CSS is definitely not as easy as it was with the <center> HTML. Not even close. If it were, there wouldn’t be this entire discussion to begin with.

I swear the amount of times topics like this come up and yet a small subset of developers, likely Stockholm syndromed into believing things are great, is ridiculous. The sooner people like yourself pull your head out of your arse and realise that the current status quo is unacceptable, the sooner web standards finally mature into something that doesn’t have more footguns than the worst of C and worst of Perl combined.

[JimDabell]

> this blog post and subsequent discussion is literally just about horizontal centring!

It’s not. Did you read past the first example? It goes into vertical centring from “Centring with flexbox” onwards.

[hnlmorg]

ok, half the article and most of the HN discussion is about horizontal centering. Either way, the point is still valid regardless of what percentage of the article was focused on something that should be trivially discoverable to even the casual web developer.

[JimDabell]

The <center> element is extremely limited and can’t centre things in most of the ways described by the article.

[hnlmorg]

I agree. However <center> (or rather a hypothetical CSS equivalent) would still more than good enough for a considerable number of common use cases.

It's perfectly reasonable to ask a particularly language to make the easy things easy while still being powerful enough to make the hard things achievable. When it comes to CSS, or even web development in general, that isn't often the case. This discussion demonstrates that point too.

We're long overdue a redesign in my opinion.

[_aavaa_]

I personally believe it was incompetence. CSS was not the first or only markup language in existence and yet here we are years later...

[dylan604]

I was not aware that CSS was a markup language

[_aavaa_]

How would you classify the language that most web pages use for specifying where to put the text and images (e.g. attempt to center it)?

[dylan604]

A rules based language.

https://developer.mozilla.org/en-US/docs/Learn/CSS/First_ste...

[progmetaldev]

If it was a markup language, it would be much easier to use. Instead, it's a rules based system that works upon a markup language (and I'm not trying to be pedantic, it would be easier if it was part of the markup, but also require much more work to change the look of content by needing to change the markup - which might be generated dynamically and difficult to change without lots of programming effort).

[alx__]

> Why haven’t these groups come together to make an easy solution to this?

https://xkcd.com/927/

[shiomiru]

It's all the more ridiculous because browsers can in fact center divs (block boxes), in an incredibly straightforward way, using the <center> tag. And all browsers implement this using a vendor-specific CSS rule (e.g. text-align: -moz-center). They must be able to do this, because real websites use it, and there is no other way to implement it using CSS.

And yet it's not standardized[1], so if you implement it in a new layout engine you're left with reverse-engineering what other browsers do (a classic).

[1]: OK, I lied. It is standardized... in the HTML standard. https://html.spec.whatwg.org/multipage/rendering.html#align-...

Notice how it's not a stylesheet, not a presentational hint, just prose. It's because standard CSS can't do what browsers could since before its invention.

[assimpleaspossi]

The `<center>` element has been obsolete for 20 years and more.

https://html.spec.whatwg.org/dev/obsolete.html#non-conformin...

[shiomiru]

I mean exactly that it's not obsolete, because there is no standard CSS property that could have obsoleted it. (Even though every browser does have one; it's just vendor-prefixed.)

Ok, maybe this will make my point clearer:

    <center style="background-color: green">
    <div align=right style="width: 10ch">
    hello
    </div>
    </center>

To replicate this in standard CSS:

    <div style="background-color: red">
    <div style="text-align: center; margin: 0 auto 0; width: fit-content">
    <div style="text-align: right; width: 10ch">
    hello
    </div>
    </div>
    </div>

Or you can switch out of flow layout:

    <div style="background-color: red; display: grid; place-content: center">
    <div style="text-align: right; width: 10ch">
    hello
    </div>
    </div>

Ok, one semantic div less. But why can't I do this?

    <div style="block-align: center /* would act like text-align: -moz-center */">
    <div style="width: 10ch; block-align: right /* would act like text-align: -moz-right */">
    hello
    </div>
    </div>

If my browser understands the first variation, then getting it to understand the last one is in all likelihood not much effort; it's just substituting properties.

The only reason it doesn't, is that the property does not exist in the standard. So you have to use non-semantic centers instead of semantic divs, but that's frowned upon, so you have to use grid layout even though you aren't making a grid, just centered flow.

I just wish it were standardized, considering it's already implemented in all browsers (in the forms text-align: -moz/-webkit-center).

[assimpleaspossi]

None of that has anything to do with the fact that the HTML standard--written and edited by all the major browser vendors--has declared the <center> element as obsolete.

[shiomiru]

Sorry, but if this is the only thing you were pointing out, then I don't see how your comment is related to mine?

<center> was marked obsolete because it's not semantic HTML, and centering stuff is the task of CSS, not HTML. It was not marked obsolete because a block-level text-align-like property would be useless.

My comment was lamenting the fact that standard CSS does not provide a compatible alternative, despite widespread implementation of the feature. Saying <center> is obsolete does not resolve this issue.