Как я могу расположить объект в центре экрана относительно области просмотра в CSS? ⇐ CSS

[Anonymous]

Это код игры, в котором я не могу динамически позиционировать персонажа в центре экрана (который виден). Когда размер экрана или окна изменяется, символ смещается в разные позиции, я хочу, чтобы он оставался в центре, независимо от размера,
html-код

Код: Выделить всё

css-код[/b]

Код: Выделить всё

.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;
}

Что я пробовал:
Я использовал высоту и ширину области просмотра, чтобы центрировать символ, но это не сработало.
Вы можете проверить это здесь ссылка
=> Я хочу, чтобы независимо от размера экрана персонаж всегда был в центре.
Как студент, я не могу понять решите проблему, помогите пожалуйста!!!

Подробнее здесь: https://stackoverflow.com/questions/791 ... iewport-in