Centrar un elemento en la pantalla solía resolverse con un bloque de CSS usando position: absolute, top: 50%, left: 50% y transform: translate(-50%, -50%). Hoy basta con un display: grid combinado con place-items: center y min-height: 100dvh, una solución casi decepcionantemente sencilla que el autor aplicó al contenedor principal de su web personal. El centrado se mantuvo perfecto hasta que abrió la página en un navegador con una barra lateral visible: el div seguía centrado, pero dentro del rectángulo equivocado, porque la rejilla solo conoce el ancho del área de contenido y no el del cromo del navegador.
Para corregir el desplazamiento, el autor recurre primero a JavaScript, restando window.innerWidth de window.outerWidth para obtener el ancho total del cromo y desplazar el contenedor la mitad hacia el lado de la barra. El truco deja de funcionar cuando se abren las herramientas de desarrollo acopladas, porque la diferencia de ancho ya no distingue cuántos píxeles hay a cada lado.
La coordenada que faltaba la aporta el puntero: un evento de puntero de confianza expone simultáneamente su posición en pantalla y su posición dentro del área de contenido, lo que permite reconstruir dónde se sitúa la vista web dentro de la ventana del navegador y calcular el desplazamiento correcto. Firefox expone esa posición de la ventana directamente; Chromium no, así que la web del autor arranca con una estimación basada en la barra lateral izquierda y se autocorrige en cuanto el cursor entra en la página. El autor ha empaquetado el método en un proyecto de código abierto llamado "center, actually", que detecta el elemento centrado y permite elegir uno manualmente si la suposición falla.