根据子元素正确居中div

Question

这是StackExchange的GameDev部分的转贴，但是，我发现该问题似乎更适用于StackOverflow，因为它与CSS，JS和定位技术有关，而不是与前者讨论的JavaScript主题（主要是UnityScript和Phaser）有关。

我一直在用HTML5制作类似roguelike的游戏 ， 而没有使用画布（仅div）和纯JS （ 小提琴！ ）。 我一直在尝试扩大图块大小（字体大小），同时保持播放器在相机内居中。 由于某些原因，当图块大小与地图大小不相等时，相机将稍微关闭。

请注意，3D效果是故意的； 我相信它增加了一些急需的深度，而且看起来非常酷。 ：d

当tileScale （小提琴中的第4行）为9 （非常不希望；玩家y轴上的点tileScale ，而不是成一个小角度）：

当tileScale为25 （点！）：

这是一些相关的（修剪过的）代码：

window.onresize = function(){
    game.viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    game.viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    game.windowSize = Math.min(game.viewportWidth, game.viewportHeight);
    // Droid Sans Mono has a ratio of 3:4 (width:height), conveniently.
    // This may be problematic. I'm not sure.
    game.tileWidth = game.windowSize*.6 / game.tileScale;
    game.tileHeight = game.windowSize*.8 / game.tileScale;
}

// Update the camera position (needs help?)
this.updateCamera = function(){
    // Get player coordinates (-.5 because we need to get the player tile center)
    // times the tileWidth plus the game window (inner square) size divided by two.
    var left = ((-game.player.x-.5)*game.tileWidth+game.windowSize/2)+"px";
    var top = ((-game.player.y-.5)*game.tileHeight+game.windowSize/2)+"px";
    game.planeContainer.style.left = left;
    game.planeContainer.style.top = top;
}

如何确保屏幕中心的点始终对齐，而不是成一个小角度？ 我目前的证据表明game.planeContainer对象的位置没有正确建立。

我知道这是一个非常棘手的问题，因此将不胜感激。 提前致谢！

（ 另一个小提琴链接，以防您略过第一个。：D ）

Answer 1

从.inner-text上的CSS样式中删除此行，以消除倾斜：
转换：translate（-50％，-50％）;