Center an left/right and those elements are rotated based on the screen

I have a component called GameFrame, in which I have two kinds of elements, one is a table and the other one is player's hand. These are in the game-frame-container.

I want to center the left and right side elements on the screen (table).

How to do this?

<div class="table"><div        style="--rotation-extra-turns: {playerIndex}"        class:count-1={players == 1}        class:count-2={players == 2}        class:count-3={players == 3}        class:count-4={players == 4}        class:count-5={players == 5}        class:count-6={players == 6}        class:flipped={game?.tricks?.flipped}        class="players cards-large">        {#if game?.players?.length}          {#each game.players as player, i}            {#if !player.inactive}<div class="player"><p class="name" class:rotate={i === ourPlayer}></p><div class="discard">                  {#if turn.type == "bid" && (player.bid || typeof player.bid == "number")}                  {:else if ["take", "card"].includes(turn.type) && discards[i]}<div class={i === ourPlayer ? "rotate" : ""}><Card card={discards[i]} {gameframe} /></div>                  {/if}</div></div>            {/if}          {/each}        {/if}</div></div>{#if watcherIndex !== -1 && turn.type !== "score"}<!-- <div class="takeOrFlip">Kibbitzer screen is here!</div> -->    {#if game.players?.length}<div class="all-players">        {#each game.players as player}<div class="player-container">            {#if player.hand?.length}<div class="hand">                {#each player.hand as card}<Card                    {card}                    onClick={() => {                      play(card);                    }}                    {gameframe}                  />                {/each}</div>            {/if}</div>        {/each}</div>    {/if}  {/if}

  .table {    height: var(--players-height);    display: flex;    margin: auto;  }[![enter image description here][1]][1]  .player-container:nth-child(1) {    position: absolute;    bottom: 0;    transform: translateX(-50%);    left: 50%;  }  .player-container:nth-child(2) {    position: absolute;    left: var(--history-width);    transform-origin: top left;    top: calc(100% - 6rem);    transform: translateY(-50%) rotate(-90deg);  }  .player-container:nth-child(2) > div {    flex-direction: row-reverse;  }  .player-container:nth-child(3) {    position: absolute;    top: 0;    left: 50%;    transform: translateX(-50%);  }  .player-container:nth-child(4) {    position: absolute;    right: var(--chat-width);    transform-origin: top right;    top: calc(100% - 6rem);    transform: translateY(-50%) rotate(90deg);  }

here I can center a div with some of my CSS (not dynamic), but I want it to be dynamic and if the player plays a card, then the player's hand should be re-centered

You can look at the picture, the left and right cards-hand is not centered.