Centrer un div avec les barres latérales

Présentation du problème

Centrer un div dans une page web a longtemps nécessité des méthodes complexes, mais les navigateurs modernes ont simplifié cette tâche en utilisant les grilles CSS. Cependant, l'apparition des barres latérales dans les navigateurs a introduit de nouvelles complexités.

La solution initiale

La méthode traditionnelle pour centrer un div consistait à utiliser des positions absolues et des transformations. Mais avec les grilles CSS, on peut simplement utiliser display: grid; et place-items: center; sur le corps de la page.

body {
  display: grid;
  min-height: 100dvh;
  place-items: center;
}

Problèmes avec les barres latérales

Cependant, lorsque les barres latérales sont visibles, le div centré ne l'est plus par rapport à la fenêtre entière, mais seulement par rapport à la zone de contenu. Pour résoudre ce problème, il faut déterminer la largeur de la barre latérale et ajuster la position du div en conséquence.

const browserChrome = window.outerWidth - window.innerWidth;
const shift = -browserChrome / 2;

Solution finale

La solution finale consiste à utiliser les événements de pointeur pour déterminer la position de la zone de contenu par rapport à la fenêtre entière. Cette méthode permet de calculer la position exacte de la zone de contenu et d'ajuster la position du div en conséquence.

const viewportLeft = event.screenX - event.clientX * scale;
const viewportRight = viewportLeft + innerWidth * scale;
const left = viewportLeft - window.screenX;
const right = window.screenX + outerWidth - viewportRight;
const shift = (right - left) / (2 * scale);