On: What does 100% mean in CSS? (2020)

[myfonj]

Sadly the most interesting CSS percentage mechanic is missing there:

    background-position

Unlike all other cases, here `background-position-x: [25]%` means:

> "Place image so its inner left [quarter] boundary matches inner left [quarter] boundary of its container."

So 0% = align left edges, 100% = align right edges, 50% = align centers (= center) etc. Super intuitive on the first sight, but I was quite surprised how thought-out it was underneath.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-...

[scotty79 → myfonj]

So it's equivalent to setting:

    left: x%;
    top: y%;
    transform: translate(-x%, -y%);

[bmeski → scotty79]

I use this all the time. One of the best ways to reliably center absolute elements.

[laurent92 → myfonj]

I mean… how else would you implement it? In GW-BASIC (when I was 10) I created a windowing system and that’s pretty much the only way to do it: Calculate the gap remaining among the parent and apply the rule on the parent. Otherwise you always end up mistaking the calculation and having your element overflow.

[chrismorgan → laurent92]

How else, you ask? As a percentage of the background clip box would be the obvious possibility. It’d be less useful, but it’d be arguably more consistent with percentages just about everywhere else. (Though, being based on the element’s background clip box rather than its containing block’s content box, it would still be somewhat different.)

It’s common for people to wish that percentages worked this way with other properties, because in some cases that’d be useful, but they don’t. (Example: margin-based centring, `width: 20em; margin-left: calc(50% - 10em);`.)