Re: [csswg-drafts] [css-anchor-1][css-position] Add the “centering” behavior which is now defined as an example in the specs as something built-in (#8979)

The issue with centering is indeed that the inset properties don't actually *align a point of the element*, they create an *area that you size/position into*. When aligning one of the box corners you can generally conflate the two, but centering exposes the difference.

The way to actually center thus is to size and align the positioning area such that it's centered on the anchor; then you can center-align the positioned element with justify-self:center. This is easy to do naively; the more complicated examples are baking in the additional constraints that it not overflow the CB, thus the min()/etc functions. (The one with 300/150 is additionally doing some work to ensure the box shifts off-center if that's needed to keep it 300px wide.)

Also, you can generally do these things more simply if you're not relying on fallback and are okay with it overflowing the "inset-modified containing block". (The `left: anchor(center); transform: translateX(-50%);` trick works then.) Getting the IMCB set up *exactly* so that overflow can be responded to requires a bit more care.

@xiaochengh's idea works, tho we might want to give it slightly more options. Happy to start from the simple version that just gives you the "largest possible centered area", tho.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8979#issuecomment-1644234816 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 20 July 2023 16:31:05 UTC