W3C home > Mailing lists > Public > www-style@w3.org > February 2017

Re: [css-align] Centering in the viewport

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Fri, 17 Feb 2017 13:18:17 -0800
Message-ID: <CAAWBYDAGu5Zn3cyHO4MYKesYJGAAZbrTBp7jURpq1ihFwWZiNg@mail.gmail.com>
To: Jan Tosovsky <jan.tosovsky.cz@gmail.com>
Cc: www-style list <www-style@w3.org>
On Fri, Feb 17, 2017 at 11:51 AM, Jan Tosovsky
<jan.tosovsky.cz@gmail.com> wrote:
> Dear All,
>
> when investigating modern ways of centering the viewport I found these
> examples:
> https://www.w3.org/Style/Examples/007/center
>
> Especially the last one utilizing 'transform' property looks promising:
> https://www.w3.org/Style/Examples/007/center-example2
>
> However, in all major browsers, when the window height is small so
> scrollbars are activated, the top of the box is cropped and it cannot be
> scrolled any more.
>
> Is such rendering incorrect or there is something wrong in the style
> definition?

That's a correct rendering - the box is definitely still centered on
the screen, but is getting positioned into the "unscrollable region"
where the scroll offset would have to be negative to show it fully.
This is the core distinction between "safe" and "unsafe" centering
that the Align spec talks about in
<https://drafts.csswg.org/css-align/#overflow-values>.

Using the alignment properties, when they're supported, will let you
center abspos element easily, while also avoiding this "unscrollable"
problem.

~TJ
Received on Friday, 17 February 2017 21:19:11 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:06 UTC