How can I position a object in the centre of screen with respect to viewport in css?

This is a code of a game, in this I am not able to position the character in centre of the screen (which is visible) dynamically. When the size of the screen or window changes then the character gets displaced to different positions, I want that it should remain in centre, whatever the size,

html code

<div class="game-screen">
    <div class="map pixel-art">
        <div class="character" facing="down" walking="true">
            <div class="shadow pixel-art"></div>
            <div class="character_spritesheet pixel-art"></div>
        </div>
        <!-- Your map content -->
    </div>
</div>

css code

.game-screen {
    /* aspect-ratio: 16/9; */
    height: 110vh;
    width: 100vw;
    overflow: hidden;
    background: #46a6da;
    position: relative;
}

.map {
    image-rendering: pixelated;
    background-image: url("now.png");
    background-size: 100%;
    top: 0vh; /* Centering vertically */
    left: 0vw; /* Centering horizontally */
    width: calc(13 * var(--grid-cell) * 3);
    height: calc(10 * var(--grid-cell) * 3);
    position: absolute;
    transform: translate(-50%, -50%); 
}

.character {
    position: fixed;
    width: calc(var(--grid-cell) * 2);
    height: calc(var(--grid-cell) * 2);
    top: 50vh;
    left: 50vw; 
    transform: translate(-50%, -50%); 
    overflow: hidden;
    z-index: 2;
}



.shadow {
    width: calc(var(--grid-cell) * 2);
    height: calc(var(--grid-cell) * 2);
    position: absolute;
    left: 0;
    top: 0;
    background: url("1718700427772.png") no-repeat no-repeat;
    background-size: 100%;
}

.character_spritesheet {
    position: absolute;
    background: url("1718700512677.png") no-repeat no-repeat;
    background-size: 100%;
    width: calc(var(--grid-cell) * 8);
    height: calc(var(--grid-cell) * 8);
}

.character[facing="right"] .character_spritesheet {
    background-position-y: calc(var(--pixel-size) * -32);
}
.character[facing="up"] .character_spritesheet {
    background-position-y: calc(var(--pixel-size) * -64);
}
.character[facing="left"] .character_spritesheet {
    background-position-y: calc(var(--pixel-size) * -96);
}
.character[walking="true"] .character_spritesheet {
    animation: walkAnimation 0.6s steps(4) infinite; 
}

What I tried,
I used viewport height and width to centre the character but does not work.
you can check it out here link

=> I want that irrespective of the screen size the character should always be in centre

As a student I am not able to figure out the problem, please help me!!!