Центрирование div раньше требовало целого ритуала: absolute, top 50%, left 50%, transform: translate(-50%, -50%). Теперь всё почти обидно просто: body получает display: grid, min-height: 100dvh, place-items: center.
Автор использовал этот способ для сайта — блок .site выглядел идеально отцентрованным, пока не открыл браузер с видимым сайдбаром. У него окно браузера разложено на весь экран, и сайдбар почти всегда открыт. Когда сайт специально центрирует узкий макет, хочется видеть его по центру окна, а не по центру свободного места рядом с сайдбаром. .site оставался отцентрованным, просто внутри неправильного прямоугольника.
Казалось, починить просто: JavaScript знает и ширину webview, и ширину всего окна. window.innerWidth даёт webview, window.outerWidth — окно браузера. Разница — это browserChrome, вся хромовая обвязка браузера. Если сайдбар слева, можно сдвинуть .site назад на половину этой разницы через CSS-свойство translate с переменной --window-center-shift. Сайдбар по-прежнему сужает webview, страница нормально перестраивается, просто центрированный контейнер переезжает в правильную точку. Если видимого места мало, поправка должна остановиться, а не прятать контент.
Всё работало, пока не открылись DevTools. Они пристыкованы справа, поэтому разница ширин включила браузерный UI с обеих сторон. Общая ширина узнавалась, но как она делится между левой и правой панелями — непонятно.
Недостающую координату дал указатель мыши. Доверенное pointer-событие знает, где оно на экране и где внутри webview. Этого достаточно, чтобы найти положение webview внутри окна: через event.screenX минус event.clientX, умноженный на scale, получается левый край viewport. Дальше легко вычислить отступы слева и справа до границ окна, а сдвиг — это половина разницы между ними.
Firefox умеет отдавать позицию viewport напрямую. В Chromium такого нет, поэтому расширение сначала берёт выбранную позицию сайдбара, а уточняет её, как только указатель заходит на страницу.
Так появилось расширение center, actually — чтобы применять ту же правку на сайтах, которыми не управляешь. Оно само пытается найти отцентрованный элемент, а если ошиблось, элемент можно выбрать вручную. Так и должно быть: это опция, которую пользователь включает сам, а не решение, навязанное сайтом всем. Разницу проще всего увидеть на демо-странице.