Re: We can't center vertically if we don't know the height of the box and container

On Thu, Jan 5, 2012 at 3:40 AM, Matthew Wilcox <elvendil@gmail.com> wrote:
> Is this being looked at?
>
> To quote from a blog post I wrote on the topic recently:
>
> For the love of all that is good in the world, I can not see why this
> is still a problem in CSS. We get hardware-accelerated CSS filters,
> but we still can’t get a box to centre vertically if we don’t know the
> box height and container height. Evidently no designers want to do
> that or no cows have wandered down that path, or all the one’s that
> did walked off a cliff and were never heard of by the CSS-WG. You
> might expect vertical-align:middle; to work. Well, don’t we all.
> *crickets*
>
> There’s a hack to do it, but the problem with using display:table is
> that accessible agents derive a semantic meaning from the CSS
> declaration and read it out as a table. Yes, I agree that sounds
> pretty backward to me too, but that’s what happens. Which means the
> hack is harmful to accessibility. Why the CSS-WG don’t just allow
> vertical-align:middle; on non-cell properties I don’t know.
>
> So, now I ballsed up and joined the list - can someone please explain
> this, and can we fix it?

Because it's hard.  CSS's existing layout algorithms are biased
towards blocks that fill their containers horizontally and stack
vertically.  In this model, horizontal centering is easy (just put the
free space on either side), but vertical centering is hard (what do
you do if one element wants to be centered but the next doesn't?).

As you note, tables get around this by having the *container* declare
that its contents will all be centered.  We could potentially have had
other elements do this as well, but due to a historical accident, we
didn't, and we can't change it now (because doing so would damage page
layouts that depend on the current behavior).  (There may be further
issues that make it possible for tables but hard for normal block
elements, but I'm not sure.)

The new layout algorithms fix this oversight.  Centering is trivial in
either dimension with Flexbox and Grid.

Abspos centering is a completely different matter.  This is purely a
historical accident - you can already horizontally center an abspos by
giving it "left:0; right:0; margin: 0 auto;", and there's no reason it
shouldn't work exactly the same vertically except that it was defined
incorrectly early on.  Again, it's been this way long enough that we
can't fix it now.

The Positioning draft
<http://dev.w3.org/csswg/css3-positioning/#position-property> defines
"position:center", which not only makes horizontal abspos centering
much easier, but also allows vertical centering.

~TJ

Received on Thursday, 5 January 2012 19:14:12 UTC