根據子元素正確居中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％）;