如何通过CSS实现游戏角色始终居中于视口？

问题核心是角色定位方式与容器尺寸设置导致窗口变化时偏移，以下是具体修改方案：

关键修改点 #

• 将角色的position: fixed改为position: absolute，使其相对于游戏容器（.game-screen）而非整个浏览器视口定位
• 把.game-screen的height: 110vh改为height: 100vh，避免容器超出视口引发垂直方向偏移
• 角色居中改用父容器百分比（top: 50%、left: 50%）配合transform: translate(-50%, -50%)，这种方式比vh/vw更稳定，能跟随容器尺寸动态调整

修改后的完整CSS代码 #

.game-screen {
    /* aspect-ratio: 16/9; */
    height: 100vh; /* 修改为100vh，匹配视口高度 */
    width: 100vw;
    overflow: hidden;
    background: #46a6da;
    position: relative;
}

.map {
    image-rendering: pixelated;
    background-image: url("now.png");
    background-size: 100%;
    width: calc(13 * var(--grid-cell) * 3);
    height: calc(10 * var(--grid-cell) * 3);
    position: absolute;
    /* 后续若要实现地图跟随角色移动，可通过JS动态设置top/left值 */
}

.character {
    position: absolute; /* 改为absolute，相对于.game-screen定位 */
    width: calc(var(--grid-cell) * 2);
    height: calc(var(--grid-cell) * 2);
    top: 50%; /* 使用父容器百分比 */
    left: 50%; 
    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; 
}

补充说明 #

如果后续需要实现地图跟随角色移动的效果，只需通过JavaScript监听角色位置，动态调整.map的top和left值即可，此时角色始终保持在容器中心，地图围绕角色偏移。

内容的提问来源于stack exchange，提问作者Spynics