Keep a container centered on the page

is there an easy way to keep a container centered on the page in a column as the pages are scrolled in the browser?
I have a list detail relationship between two tables and want the detail table, which is in the right column to stay centered in the browser as I scroll down the result of the query that is displayed in the left column.

I am assuming that you want the details table to always be visible when scrolling down the master list.

There are a couple of ways to do this, namely

  • a paged master list
  • a scrollabel master list.

The former is great when there are many many items in the list. You can do this by following https://docs.wappler.io/t/applying-dynamic-paging/2865

The latter is ideal when there are fewer items in the list. This can be achieved by adding a max-height to the table such as

max-height: calc(100vh - 250px;

where 250px can be changed to what is required to offset the navbar and footer.