Quiero centrar un elemento horizontalmente en el área visible de una cuadrícula desplazable. Entonces, el texto en la última fila aquí debe estar centrado horizontalmente dentro de la línea azul.

Esto es lo que quiero:

Al desplazarse, debe permanecer centrado y visible:

Esto es lo que tengo hasta ahora:

JSFiddle: https://jsfiddle.net/6v0ybnd2/24/

 <div class="wrapper"> <div class="otherContent"></div> <div class="grid" > <div class="row"> Row - this is a long text in row 1 </div> <div class="row"> Row - this is a long text in row 2 </div> <div class="row"> Row - this is a long text in row 3 </div> <div class="row-element" id="element"> this row should always be centered in the visible area </div> </div> </div>

 .wrapper { display: grid; grid-template-columns: auto auto; } .otherContent { width: 200px; background: orange; } .grid { display: grid; gap: 10px; margin: 10px; } .row { height: 20px; width: 1400px; background: lightBlue; } .row-element { height: 20px; width: 100vw; /* This width should be set to the visible */ position: sticky; text-align: center; left: 0; background: lightBlue; }

 const el = document.getElementById("element"); console.log(el.clientWidth); el.style.maxWidth = el.clientWidth;

Funciona un poco usando width: 100vw , pero solo cuando la cuadrícula ocupa todo el ancho. Por lo que entiendo, clientWidth proporciona el ancho visible de un elemento, sin embargo, establecer el width en ese realmente no funciona (¿presumiblemente porque cambia clientWidth nuevamente?

¿Alguna idea de como resolver esto? Idealmente solo en css, pero supongo que eso no es posible. También preferiría no establecer la posición a través de javaScript, ya que eso genera un retraso visible, por lo que creo que establecer el ancho y usar Sticky es el mejor enfoque.